Incrementing a variable in Javascript not working?

Question

I have created a basic score counter using a variable.

Basically what happens is when you click a box, if the variable findbomb is equal to the parameter of the function choice, then it will say you won and it should add 1 to the variable score but if the variable findbomb is different than the parameter num then if will say you lost and take 1 away from the score.

But for some reason even though I am using score++ to increment the variable it refuses to do so and no errors pop up inside of the developers menu in 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>

Well every one starts some where.. :) You tried, that's what counts. In choose function, try changing this to this: {document.getElementById('feedback').innerHTML = "You Win"; score++; showscore()} — tanjir
– tanjir, Commented Dec 10, 2015 at 19:13

gen_Eric · Accepted Answer · 2015-12-10 19:13:31Z

1

You need to set window.onload to a function. Not to undefined.

When you do window.onload = start();, you are calling start() immediately and assigning its return value (undefined) to window.onload - which does nothing.

You want to do either:

window.onload = start;

or:

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

answered Dec 10, 2015 at 19:13

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MattC · Accepted Answer · 2015-12-10 19:18:14Z

1

So when you have an issue like this, you should either print the expected values out at certain points, or better yet, use breakpoints and then walk thru the code. In this case, just open the page in a browser like Chrome and then open the developer tools (f12 in chrome). You then set a breakpoint and walk forward one step at a time.

Ah, and I see your comment now about nothing showing in developer tools. So that means you need to go back to square one to figure out why your code is not getting executed, which has nothing to do with your variable set up.

answered Dec 10, 2015 at 19:18

MattC

6,4641 gold badge54 silver badges43 bronze badges

1 Comment

zer00ne Over a year ago

Hey @MattC I'm the MattC in California, you have impeccable taste in anime, sir. Upped because all MattCs deserve no less.

Samsam · Accepted Answer · 2015-12-10 20:33:40Z

0

The score is not showing, because it needs to be updated on the html page.

Try putting something like this after the last if else if clause:

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

This should update your score on the page.

edited Dec 10, 2015 at 20:33

answered Dec 10, 2015 at 19:25

Samsam

13 bronze badges

Collectives™ on Stack Overflow

Incrementing a variable in Javascript not working?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related