Display line at a time script not working in IE

[multichild]

I have the following bit of code which works fine in Mozilla, but just tested it in IE and it doesn’t seem to work, and I’m not good enough to see the issue.

<div id="container" style="margin-top:17px;">
<p style="color:white">
Health is our heritage, our right.<br/>
It is the complete and full union between soul, mind and body;<br/>
and this is not a difficult far-away ideal to attain,<br/>
but one so easy and natural&#8230;<br/>
that many of us have overlooked it.<br/>
Dr Edward Bach
</p>
</div>

<script>
function fadeInLine(line){
$('<span />', {
html: line.trim(),
style: "opacity: 0"
})
.appendTo($greeting)
.animate({opacity:1}, 1500);
}

function rotateLines(interval){
setTimeout(() => {
if (i >= lines.length){
  i = 0;
  interval = 4000;
  setTimeout(()=>{ $greeting.empty(); }, interval)
} else {
  fadeInLine(lines[i]);
  i++;
  interval = 1850;
}
rotateLines(interval);
}, interval);
}

const $greeting = $('div#container p');
const text = $greeting.html();
const lines = text.split("\n").filter((e) => e.replace(/\s+/, ""));
let i = 0;

$greeting.empty();
rotateLines();
</script>

[PaulOB]

It works in Edge but I don’t think IE11 supports the ES6 js you are using (arrow functions).

Using this converter the output seems to now work in IE11.

'use strict';

function fadeInLine(line) {
    $('<span />', {
        html: line.trim(),
        style: "opacity: 0"
    }).appendTo($greeting).animate({
        opacity: 1
    }, 1500);
}

function rotateLines(interval) {
    setTimeout(function () {
        if (i >= lines.length) {
            i = 0;
            interval = 4000;
            setTimeout(function () {
                $greeting.empty();
            }, interval);
        } else {
            fadeInLine(lines[i]);
            i++;
            interval = 1850;
        }
        rotateLines(interval);
    }, interval);
}

var $greeting = $('div#container p');
var text = $greeting.html();
var lines = text.split("\n").filter(function (e) {
    return e.replace(/\s+/, "");
});
var i = 0;

$greeting.empty();
rotateLines();

[multichild]

@PaulOB

‘use strict’;

function fadeInLine(line) {
$(‘<span />’, {
html: line.trim(),
style: “opacity: 0”
}).appendTo($greeting).animate({
opacity: 1
}, 1500);
}

function rotateLines(interval) {
setTimeout(function () {
if (i >= lines.length) {
i = 0;
interval = 4000;
setTimeout(function () {
$greeting.empty();
}, interval);
} else {
fadeInLine(lines[i]);
i++;
interval = 1850;
}
rotateLines(interval);
}, interval);
}

var $greeting = $(‘div#container p’);
var text = $greeting.html();
var lines = text.split(“\n”).filter(function (e) {
return e.replace(/\s+/, “”);
});
var i = 0;

$greeting.empty();
rotateLines();

Cheers Paul, nailed it again