I've tried to use some JS function in order to create simple animations - what I'm doing wrong? I cannot see any effect and I'm new to JS. In theory that function should find DOM and change inner HTML in given speed.
Code for script (scripts/asci_animation.js):
function ASCIIAnimation(animArray, speed, DOMtarget) {
var currentFrame = 0;
for(var i = 0; i < animArray.length; i++) {
animArray[i] = animArray[i].replace(/ /g," ");
animArray[i] = "<pre>" + animArray[i] + "</pre>";
}
DOMtarget.innerHTML = animArray[0];
currentFrame++;
this.animation = setInterval(function() {
DOMtarget.innerHTML = animArray[currentFrame];
currentFrame++;
if(currentFrame >= animArray.length) currentFrame = 0;
}, speed);
this.getCurrentFrame = function() {
return currentFrame;
}
}
ASCIIAnimation.prototype.stopAnimation = function() {
clearInterval(this.animation);
}
var animArray1 = ["///","|||","\\\\\\","|||"];
var anim1 = new ASCIIAnimation(animArray1, 200, "anim");
part of HTML that should contain text:
text1
<div id="anim"></div>
text2
<script type="text/javascript" src="scripts/asci_animation.js"></script>
Can you tell me how to make it visible/working?
I've tried to use code mentioned above with multiple changes. Original code comes from //https://codepen.io/alan8r/pen/VjRrZj. No errors in console. Tried to put script type...src before and after .