Javascript Uncaught ReferenceError：インクリメントが定義されていません

Question

私はあるポイントに達すると停止する数値を必要とするゲームに取り組んでいます。私はこれまでこれをやってきました。しかし、それを私のコードの残りの部分に入れると、動作しなくなりました。このエラーはVM1756:1 Uncaught ReferenceError: increment is not definedです。開始するには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

これはsetTimeoutかsetIntervalとの文字列を使用してないのための多くの理由の一つです。文字列を使用する場合、コードはグローバルスコープで実行されますが、increment関数はグローバルスコープには存在しません（これは正常です）。

代わりに、ちょうどその識別子を使用して直接参照：

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