有没有人知道这个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有什么问题？

回答

相关问题