Javascript function for ASCI not working in my HTML file

36 Views Asked by At

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,"&nbsp;");
        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 .

0

There are 0 best solutions below