Javascript Uncaught ReferenceError: increment is not defined

Question

I am working on a game that needs a number that will stop once it reaches a certain point. I have managed to do that so far. But, when I put it into the rest of my code it stopped working and I got this error: VM1756:1 Uncaught ReferenceError: increment is not defined . To start it type upload trojan .

 var l1 = document.getElementById('l1'); var l2 = document.getElementById('l2'); var l3 = document.getElementById('l3'); var l4 = document.getElementById('l4'); var l5 = document.getElementById('l5'); var l6 = document.getElementById('l6'); var l7 = document.getElementById('l7'); var l8 = document.getElementById('l8'); var l9 = document.getElementById('l9'); var l10 = document.getElementById('l10'); var l11 = document.getElementById('l11'); var l12 = document.getElementById('l12'); var l13 = document.getElementById('l13'); var l14 = document.getElementById('l14'); var l15 = document.getElementById('l15'); var l16 = document.getElementById('l16'); function runcmd() { var user = document.getElementById('code').value; if (user == 'upload trojan') { window.setInterval(function() { l1.innerHTML = "uploading trojan"; }, 2000); window.setInterval(function() { l2.innerHTML = "..."; }, 1900); window.setInterval(function() { l3.innerHTML = "Compression Complete."; }, 1800); window.setInterval(function() { l4.innerHTML = "Authorized..."; }, 17000); window.setInterval(function() { l5.innerHTML = "Calculating Space Requirements"; }, 16000); window.setInterval(function() { l6.innerHTML = "Waiting for response..."; }, 15000); window.setInterval(function() { l7.innerHTML = "tar -xzf Texture"; }, 1400); window.setInterval(function() { l8.innerHTML = "Calculating Space Requirements"; }, 1300); window.setInterval(function() { l9.innerHTML = "Entering Security Console..."; }, 1200); window.setInterval(function() { l10.innerHTML = "Authorized..."; }, 1000); var a = 0; var b = 5; var c = 10; var d = 15; var e = 20; var f = 25; function increment() { if (a == 300) { // stop when it hits 300 window.clearInterval(id); return; } a++; document.getElementById('l11').innerHTML = Number(a).toLocaleString('en'); if (b == 80) { // stop when it hits 80 window.clearInterval(id); return; } b = b + 5; document.getElementById('l12').innerHTML = Number(b).toLocaleString('en'); if (c == 17) { // stop when it hits 80 window.clearInterval(id); return; } c = c + 5; document.getElementById('l13').innerHTML = Number(c).toLocaleString('en'); if (d == 123) { // stop when it hits 80 window.clearInterval(id); return; } d = d + 5; document.getElementById('l14').innerHTML = Number(d).toLocaleString('en'); if (e == 175) { // stop when it hits 80 window.clearInterval(id); return; } e = e + 5; document.getElementById('l15').innerHTML = Number(e).toLocaleString('en'); if (f == 970) { // stop when it hits 80 window.clearInterval(id); return; } f = f + 5; document.getElementById('l16').innerHTML = Number(f).toLocaleString('en'); }; var id = window.setInterval('increment()', 100); }; }; 

 .span { color: #66ff33; font-family: "consola"; text-decoration: none; font-size: 12px; } input, select, textarea { color: #66ff33; } textarea:focus, input:focus { color: #66ff33; } .console { position: relative; height: 250px; width: 500px; background-color: #000; border-left: 10px solid #cccccc; border-top: 5px solid #cccccc; border-right: 10px solid #cccccc; border-bottom: 10px solid #cccccc; } .exit { float: right; background: #800000; color: white; height: 25px; border: none; width: 40px; font-size: 20px; text-align: center; margin-left: 5px; } 

 <div id="con" class="console"> <button class="exit" onclick="hidecon()">X</button> <div> <span class="span" id="l1" style="width:50px"></span> <br /> <span class="span" id="l2" style="width:50px"></span> <br /> <span class="span" id="l3" style="width:50px"></span> <br /> <span class="span" id="l4" style="width:50px"></span> <br /> <span class="span" id="l5" style="width:50px"></span> <br /> <span class="span" id="l6" style="width:50px"></span> <br /> <span class="span" id="l7" style="width:50px"></span> <br /> <span class="span" id="l8" style="width:50px"></span> <br /> <span class="span" id="l9" style="width:50px"></span> <br /> <span class="span" id="l10" style="width:50px"></span> <br /> <span class="span" id="l11" style="width: 5px" value="0"></span><span class="span" id="l11" value="0" style="width: 5px"></span><span class="span" id="l12" value="0" style="width: 5px"></span><span class="span" id="l13" value="0" style="width: 5px"></span> <span class="span" id="l13" value="0" style="width: 5px"></span><span class="span" id="l14" value="0" style="width: 5px"></span><span class="span" id="l15" value="0" style="width: 5px"></span><span class="span" id="l16" value="0" style="width: 5px"></span> <span class="span" id="l17" style="width: 5px"></span> </div> <span style="position: absolute; left: 0; bottom: 0;color:#66ff33;">C:\\></span> <input id="code" style="position: absolute; left: 30; bottom: 0; width:250px;border:2px solid white;background-color:black" /> </div> <button style="border:none;position:absolute;background-color:black;bottom:0;left:114;color:#66ff33;border-radius: 5px;border: 1px solid white;" onclick="runcmd()">Send Command</button> 

Answer 1

This is one of the many reasons for not using strings with setTimeout or setInterval . If you use a string, the code is run at global scope, but your increment function doesn't exist at global scope (which is good).

Instead, just refer to it directly using its identifier:

var id = window.setInterval(increment, 100);