有沒有人知道這個DOM有什麼問題？

-2

我在這裏有這個代碼的問題，我似乎無法找到原因。有沒有人知道這個DOM有什麼問題？

<body> 
    <h1 id="score" style="text-align:center;align:center;"> 
    Get Ready 
    </h1> 
    <div style="height:450px;width:90%;background-color:white;border:5px solid lime;border-radius:1%;margin:0px;padding:0px"> 
    <button onclick="clicked(1)" id="1" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"> 
    </button> 
    <button onclick="clicked(2)" id="2" style="background-color:white;width:32.4%;height:33%;border:0px;padding:0px;margin:0px"> 
    </button> 
    <button onclick="clicked(3)" id="3" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"> 
    </button> 
    <button onclick="clicked(4)" id="4" style="background-color:white;width:33%;height:31.9%;border:0px;padding:0px;margin:0px"> 
    </button> 
    <button onclick="clicked(5)" id="5" style="background-color:white;width:32.4%;height:31.9%;border:0px;padding:0px;margin:0px"> 
    </button> 
    <button onclick="clicked(6)" id="6" style="background-color:white;width:33%;height:31.9%;border:0px;padding:0px;margin:0px"> 
    </button> 
    <button onclick="clicked(7)" id="7" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"> 
    </button> 
    <button onclick="clicked(8)" id="8" style="background-color:white;width:32.4%;height:33%;border:0px;padding:0px;margin:0px"> 
    </button> 
    <button onclick="clicked(9)" id="9" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"> 
    </button> 

    <script> 
     setTimeout(function(){ document.getElementById("score").innerHTML="3"; }, 3000); 
     setTimeout(function(){ document.getElementById("score").innerHTML="2"; }, 4000); 
     setTimeout(function(){ document.getElementById("score").innerHTML="1"; }, 5000); 
     setTimeout(function(){ document.getElementById("score").innerHTML="GO"; game(); }, 6000); 

     function game(){ 

     setTimeout(function(){ document.getElementById("score").innerHTML="No points"; gamesetup(); }, 500); 

     function gamesetup(){ 

      var game=true; 
      var score=0; 
      var litNum; 



      gameloop(); 

     } 
     } 

     function gameloop(){ 

      if(game){ 
      var solved=false; 
      var litNum=Math.floor(Math.random() * (9 - 1 + 1)) + 1; 
      var litNum=litNum.toString(); 
      document.getElementById(litNum).style.backgroundColor="#FFFF00"; 
     }else{ 

      document.getElementById("score").innerHTML="Game Over at: "+score+"."; 

     } 

     } 

     function clicked(number){ 

      if(number==litNum&&game){ 
      if(!solved){ 
      var score=score+1; 
      var solved=true; 

      } 

      }else{ 

      var game=false; 
      var solved=false; 


      } 
      document.getElementById("score").innerHTML="Score: "+score+"."; 

     } 

    </script> 
    </div> 
</body>

由於某些原因，它不會寫「分數：0」。就像它應該的id分數一樣。我在他們之前寫過這個程序，而且工作正常。任何人都知道問題？（以及如何解決它）？

來源

2015-12-02 BKFighter

控制檯說什麼？任何錯誤？ –

讓我檢查... – BKFighter

您發佈的HTML沒有ID爲「score」的元素。它在頁面上的其他地方，你忘了發佈它，或者它根本不存在？ – sgroves

litNum未定義：if (number == litNum && game) {

你必須定義所有全球在var全球空間。每次你想訪問它，都不要重用var！

這裏是工作代碼：

<body> 
 
    <h1 id="score" style="text-align:center;align:center;"> 
 
    Get Ready 
 
    </h1> 
 
    <div style="height:450px;width:90%;background-color:white;border:5px solid lime;border-radius:1%;margin:0px;padding:0px"> 
 
    <button onclick="clicked(1)" id="1" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"></button> 
 
    <button onclick="clicked(2)" id="2" style="background-color:white;width:32.4%;height:33%;border:0px;padding:0px;margin:0px"></button> 
 
    <button onclick="clicked(3)" id="3" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"></button> 
 
    <button onclick="clicked(4)" id="4" style="background-color:white;width:33%;height:31.9%;border:0px;padding:0px;margin:0px"></button> 
 
    <button onclick="clicked(5)" id="5" style="background-color:white;width:32.4%;height:31.9%;border:0px;padding:0px;margin:0px"></button> 
 
    <button onclick="clicked(6)" id="6" style="background-color:white;width:33%;height:31.9%;border:0px;padding:0px;margin:0px"></button> 
 
    <button onclick="clicked(7)" id="7" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"></button> 
 
    <button onclick="clicked(8)" id="8" style="background-color:white;width:32.4%;height:33%;border:0px;padding:0px;margin:0px"></button> 
 
    <button onclick="clicked(9)" id="9" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"></button> 
 

 
    <script> 
 
     setTimeout(function() {document.getElementById("score").innerHTML = "3";}, 3000); 
 
     setTimeout(function() {document.getElementById("score").innerHTML = "2";}, 4000); 
 
     setTimeout(function() {document.getElementById("score").innerHTML = "1";}, 5000); 
 
     setTimeout(function() {document.getElementById("score").innerHTML = "GO";game();}, 6000); 
 

 
     var game; 
 
     var score; 
 
     var litNum; 
 

 
     function game() { 
 
     setTimeout(function() { 
 
      document.getElementById("score").innerHTML = "No points"; 
 
      gamesetup(); 
 
     }, 500); 
 

 
     function gamesetup() { 
 
      game = true; 
 
      score = 0; 
 
      gameloop(); 
 
     } 
 
     } 
 

 

 
     function gameloop() { 
 
     if (game) { 
 
      solved = false; 
 
      litNum = Math.floor(Math.random() * (9 - 1 + 1)) + 1; 
 
      litNum = litNum.toString(); 
 
      document.getElementById(litNum).style.backgroundColor = "#FFFF00"; 
 
     } else { 
 
      document.getElementById("score").innerHTML = "Game Over at: " + score + "."; 
 
     } 
 
     } 
 

 
     function clicked(number) { 
 
     if (number == litNum && game) { 
 
      if (!solved) { 
 
      score = score + 1; 
 
      solved = true; 
 
      } 
 
     } else { 
 
      game = false; 
 
      solved = false; 
 
     } 
 
     document.getElementById("score").innerHTML = "Score: " + score + "."; 
 
     } 
 
    </script> 
 
    </div> 
 
</body>

來源

2015-12-02 23:44:25 CoderPi

謝謝！對不起，如果我沒有做好工作。 JS還是個不錯的選擇。我理解它是多麼令人討厭，因爲我在Scratch（.mit.edu）上做了這種類型的東西。 – BKFighter

現在你好起來了。 – CoderPi

這可能不是解決所有問題，但它看起來像解決，比分應該是全局變量。您應該只聲明一次，並且應該在函數之外聲明它們。

var solved = false; 
    var score = 0; 
    function clicked(number){ 
     if(number==litNum&&game){ 
     if(!solved){ 
      score=score+1; 
      solved=true; 
     } 
     }else{ 
     game=false; 
     solved=false; 
     } 
     document.getElementById("score").innerHTML="Score: "+score+"."; 
    }

使用Firebug或類似的工具來瀏覽你的代碼，看看發生了什麼。

來源

2015-12-02 23:36:17 user2182349

有沒有人知道這個DOM有什麼問題？

回答

相關問題