有没有人知道这个DOM有什么问题?

时间:2015-12-02 23:30:47

标签: javascript html 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>

出于某种原因,它不会写'&#34;得分:0。&#34;就像在ID得分一样。我之前已经在这个程序中写过,这很好用。有谁知道这个问题? (以及如何修复它?)

2 个答案:

答案 0 :(得分:4)

这可能无法解决所有问题,但看起来似乎已经解决,得分应该是全局变量。你应该只声明它们一次,并且应该在函数之外声明它们。

    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或类似工具逐步执行代码,看看发生了什么。

答案 1 :(得分:1)

  

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>