I'm attempting to make this script work. The script is designed to be referenced from an external script file, but I need it to be embedded for certain reasons which I won't delve into. I believe I've set it up correctly, but it seems that when I load the file, the text just appears all at once. Can someone please point out what I'm doing wrong here?
<html>
<script>
document.addEventListener("DOMContentLoad", typeWriter, false);
var typeWriter = function (selector, type, interval) {
"use strict";
var el = document.querySelectorAll(selector),
i = 0,
len = el.length,
list = [],
a,
all,
text,
start,
end,
nextText,
style,
clear;
for (; i < len; i++) {
list.push(el[i]);
}
for (a in list) {
all = list[a];
text = all.innerHTML += " <span id='cursor'>|</span>";
start = 0;
end = 0;
style = document.createElement("style");
document.head.appendChild(style);
if (typeof interval === "undefined") {
interval = 100;
}
if (arguments[1] === "true") {
clear = setInterval(function () {
var newText = text.substr(start, end);
all.innerHTML = newText += " <span id='cursor'>|</span>";
end = end + 1;
style.sheet.insertRule("@-webkit-keyframes cursor {0% { opacity : 1;}100% { opacity : 0;}}", 0);
style.sheet.insertRule("@keyframes cursor {0% { opacity : 1;}100% { opacity : 0;}}", 0);
cursor.style.fontSize = "30px";
cursor.style.fontWeight = "bold";
cursor.style.webkitAnimation = "cursor 0.5s infinite";
cursor.style.animation = "cursor 0.5s infinite";
if (newText === text) {
clearInterval(clear);
}
}, interval);
}
return all;
}
};
typeWriter("#para1","true",100);
</script>
<p id="para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</html>