在Javascript中增加变量无效？

Question

我使用变量创建了一个基本得分计数器。

基本上发生的是单击框时，如果变量findbomb等于函数选择的参数，那么它将表示您赢了，并且应该将变量score加1，但是如果变量findbomb与参数num不同那么如果说您输了，则比分减少1。

但是由于某些原因，即使我使用score++来增加变量，它也拒绝这样做，并且Chrome的开发人员菜单中没有弹出错误。

<!doctype html>
<html>
<head>

    <title>Assignment</title>

    <style>
        body{background:black;}


        #game{width:1282px;
              position:absolute;top:15%;left:50%;
              margin-left:-642px;}

        #background{width:1282px;}

        #covered{width:1282px;
                 position:absolute;left:50%;top:70%;
                 margin-left:-642px;
                 z-index:100;}

        #filled{width:1282px;
                position:absolute;top:70%;
                z-index:50;}

        #box0{position:absolute;;left:20%;}

        #box1{position:absolute;left:60%;}


        .bombonleft{position:absolute;left:20%;}
        .blankonright{position:absolute;left:60%;}


        .blankonleft{position:absolute;left:20%;}
        .bombonright{position:absolute;left:60%;}

        #rules{width:500px;
               text-align:center;
               background:red;
               position:absolute;top:10%;left:50%;
               margin-left:-250px;
               z-index:300;
               display:none;}


        #feedback{position:absolute;left:50%;top:10%;
                  margin-left:-300px;
                  width:600px;
                  height:auto;
                  font-size:200%;
                  font-family:sans-serif;
                  text-align:center;
                  background:red;
                  display:none;}

        #scores{position:absolute;top:10%;left:5%;
               width:50px;
               text-align:center;
               font-size:300%;
               font-family:sans-serif;
               background:red;}

        #timer{position:absolute;top:30%;left:50%;
               margin-left:-236px;}

        #countdown{width:300px;
                   text-align:center;
                   position:absolute;
                   left:50%;
                   top:35%;
                   font-family:sans-serif;
                   font-size:1000%;
                   margin-left:-150px;
                   color:red;
                 }

        #title{text-align:center;
               font-family:sans-serif;
               font-size:300%;
               color:red;
               }
        #finder{background:red;}

        #new{background:red;}
    </style>


</head>

<body> 
    <div id="title">
        <p>Find the Bomb!</p>
    </div>

    <div id ="game">


      <div id="covered">  
            <img id="box0" src="closed.png" onclick="choose(0);">
            <img id="box1" src="closed.png" onclick="choose(1);">
        </div>

        <div id="filled">
          <img id ="bomb" class="bombonright" src="bomb .png">
          <img id="blank" class="blankonleft" src="empty.png">
      </div>

       <div id="background">
         <div id="scores"> 2 </div>
            <img id="backround"src="new background.png">    
       </div>

       <div id="buttons">
         <button id="Restartbtn" onclick="start();">Restart</button>
         <button id="Rulesbtn" onclick = "showrules();">?</button>
      </div>

        <div id="rules">
            <p> You awake to find yourself locked in this room with two boxes at your feet.</p>
            <p> A voice comes over a speaker and states "Welcome, you have been chosen to take part in a little game. At your feet you will find two boxes. One is empty and the other contains a enough explosives to reduce you to dust. The aim of the game is simple find the bomb.</p>
            <p> However, there are some rules</p>
            <p> Firstly you must make a choice within 5 seconds , otherwise the bomb explodes. There is a timer that counts down so be ware<p>
            <p> You may only choose one box </p>
            <p> Choose correctly and you may advance to the next round <p>
            <p> If you survive a round you will get a point ,once you have 5 you will be set free <p>
            <p> However if you fail to find the bomb , you will lose a point. Once you score hits -5 , the bomb will detonat<p>
            <p> The game begins as soon as you press close on this message, if you need to select it again press the "?" button<p>

            <button onclick="hiderules();"> CLOSE </button>
        </div>

      <div id="feedback">
            You lost! <br>Fortunately this bomb was a fake!
        </div>
<div id="timer">
      <img src="timer.png">
    </div>

        <div id="countdown">
            2:00
        </div>

        <div id="finder">
        fdafdsfa
        </div>

      <div id="new">
        2ffdaj
        </div>

    </div>

    <script>
        var findbomb=1;
        var clickable = false;
        var score = 0;

        window.onload = start();findme();newscore();

        function findme()
            {document.getElementById('finder').innerHTML = findbomb;}   

        function newscore()
            {document.getElementById('new').innerHTML = score;};

        function start()
            {score=0;
             showscore();
             setup();};

        function showscore()
            {document.getElementById('scores').innerHTML= score;};

        function hidebox()
            {document.getElementById('box0').style.display = "block";
             document.getElementById('box1').style.display = "block";};

        function hidefeedback() 
            {document.getElementById('feedback').style.display =  "none";};

        function showbfeedback()
            {document.getElementById('feedback').style.display = "block";
             setTimeout(setup, 1000);
            };

        function showrules()
            {document.getElementById('rules').style.display = "block";};

        function hiderules()
            {document.getElementById('rules').style.display = "none";};

        function play()
            { findbomb = Math.floor(Math.random()*2);

              if (findbomb == 0)
                {document.getElementById('bomb').setAttribute("class", "bombonleft");
                 document.getElementById('blank').setAttribute("class", "blankonright");}

              else if (findbomb == 1)
                {document.getElementById('bomb').setAttribute("class", "bombonright");
                 document.getElementById('blank').setAttribute("class", "blankonleft");}

             clickable=true;

            };

        function setup()
            {hidefeedback();
             hidebox();
             play();};

        function choose(num)
            {if (clickable = true)
                {document.getElementById('box'+num).style.display = "none";

                    if(findbomb ==num)
                        {document.getElementById('feedback').innerHTML = "You Win"; score++;}
                    else if (findbomb != num)
                        {document.getElementById('feedback').innerHTML ="You lose, fortunately that one was a fake!";score--;};

                    setTimeout(showbfeedback, 1000);
                    clickable= false;   
                }
            }


    </script>
</body>
</html>

Answer 1

您需要将window.onload设置为function 。 不要undefined 。

当你做window.onload = start(); ，您将立即调用 start()并将其返回值 （ undefined ）分配给window.onload不执行任何操作。

您想执行以下任一操作：

window.onload = start;

要么：

window.onload = function(){
    start();
};

Answer 2

因此，当遇到这样的问题时，您应该在某些点上打印出期望值，或者更好的是，使用断点，然后遍历代码。 在这种情况下，只需在类似Chrome的浏览器中打开页面，然后打开开发人员工具（Chrome中为f12）即可。 然后，您设置一个断点并一次向前走一步。

嗯，我现在看到您的评论，关于开发人员工具中什么都没有显示。 因此，这意味着您需要回到第一位，以找出为什么代码未得到执行的原因，这与变量设置无关。

Answer 3

分数未显示，因为它需要在html页面上进行更新。

尝试在最后的if else if子句之后放置类似这样的内容：

document.getElementById('scores').innerHTML = ""+score;

这会更新您在页面上的分数。

在Javascript中增加变量无效？

问题描述

3 个解决方案

解决方案1
1 2015-12-10 19:13:31

解决方案2
1 2015-12-10 19:18:14

解决方案3
0 2015-12-10 19:25:07

在Javascript中增加变量无效？

问题描述

3 个解决方案

解决方案1 1 2015-12-10 19:13:31

解决方案2 1 2015-12-10 19:18:14

解决方案3 0 2015-12-10 19:25:07

解决方案1
1 2015-12-10 19:13:31

解决方案2
1 2015-12-10 19:18:14

解决方案3
0 2015-12-10 19:25:07