John Smith John Smith - 1 month ago 9
Javascript Question

Javascript setInterval doesn't work

I have this code that has to be a tree with random signs. I put setInterval to change the signs every second, but nothing happens and I don't get even any error.
Someone please tell me where I made a mistake, or more :).

OLD VERSION



'use strict';

window.onload = intervalSetup();
var arraySigns = ["*", "^", "&", "#"];

function intervalSetup() {

setInterval(function() {
theTree();
}, 1000);
}

function theTree() {
var x = 8;
for (var i=0; i<x; i++) {
for (var j=x-1; j>i; j--) {
document.write("&nbsp;&nbsp;");
}
for (var k=0; k<=(i*2); k++) {
document.write(arraySigns[Math.floor(Math.random() * arraySigns.length)]);
}
document.write("<br>")
}
for (var i=0; i<2; i++) {
for (var j=0; j<(x*2)-3; j++) {
document.write("&nbsp;");
}
document.write("**<br>");
}
}





NEW VERSION(after reading the comments)



'use strict';

window.onload = intervalSetup();
var arraySigns = ["*", "^", "&", "#"];
var getTree = document.getElementById("tree");
function intervalSetup() {

setInterval(function() {
theTree();
}, 1000);
}

function theTree() {
var x = 8;
for (var i=0; i<x; i++) {
for (var j=x-1; j>i; j--) {
getTree.innerHTML = "&nbsp;&nbsp;";
}
for (var k=0; k<=(i*2); k++) {
getTree.innerHTML += arraySigns[Math.floor(Math.random() * arraySigns.length)];
}
getTree.innerHTML += "<br>";
}
for (var i=0; i<2; i++) {
for (var j=0; j<(x*2)-3; j++) {
getTree.innerHTML += "&nbsp;";
}
getTree.innerHTML += "**<br>";
}
}

<div id="tree"></div>




Answer

I refactored a bit to use a document fragment. There is still optimization that could be done, but it generates a new tree and replaces the old one as you wanted.

The code after first edit worked fine in generating the tree, but it was just endlessly pasting the new trees so it was harder to see the changes. The switch to generating the trees in place shows the code was working fine.

'use strict';
window.onload = intervalSetup;
var arraySigns;
var treeDiv;

function intervalSetup() {  
  arraySigns = ["*", "^", "&", "#"];
  treeDiv = document.getElementById("theTreeDiv");
  setInterval(theTree, 1000);
}

function theTree() {
  treeDiv.innerHTML = '';
  var docFrag = document.createDocumentFragment();
  var x = 8;
  for (var i=0; i<x; i++) {
    
    for (var j=x-1; j>i; j--) {
      let spaceSpan = document.createElement("span");
      spaceSpan.innerHTML = "&nbsp;&nbsp;";
      docFrag.appendChild(spaceSpan);
    }
    
    for (var k=0; k<=(i*2); k++) {
      let symbolSpan = document.createElement("span");
      symbolSpan.textContent = arraySigns[Math.floor(Math.random() * arraySigns.length)];
      docFrag.appendChild(symbolSpan);
    }
    
    docFrag.appendChild(document.createElement("br"));
  }
  
  for (var i=0; i<2; i++) {
    
    for (var j=0; j<(x*2)-3; j++) {
      let spaceSpan = document.createElement("span");
      spaceSpan.innerHTML = "&nbsp;";
      docFrag.appendChild(spaceSpan);
    }
    
    let starSpan = document.createElement("span");
    starSpan.textContent = "**";
    docFrag.appendChild(starSpan);
    docFrag.appendChild(document.createElement("br"));      
  }
  
  treeDiv.appendChild(docFrag);
}
<div id="theTreeDiv">
  
</div>