I want to make a game to count the number of clicks on the image in 1 minute

Question

I've made this code to make a game that counts the number of clicks on the moving image .. but i can't make the Countdown or the counter .. i want when the user press start the game an countdown begins .. and every click on the image the number in (the counter) increased by one .. Thnx

var x_position = 0 ; 
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving;

function movingf() {
  theSpace.appendChild(theTree);
  theTree.style.left=Math.floor(Math.random() * 401) + "px";
  theTree.style.right=Math.floor(Math.random() * 401) + "px";
  theTree.style.top=Math.floor(Math.random() * 401) + "px";
  theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
  moving=setTimeout(movingf,500);
  theTree.addEventListener("click",theCounter);
}

function theGame() {
  textt.style.clear="both";
  theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
  theTree.style.position="absolute";
  theSpace.appendChild(theTree);
  textt.appendChild(theMission);
  moving=setTimeout(movingf,50);
  theTree.onclick = theCounter();
}

function theCounter() {
  var time = 0; 
  time = time + 1 ; 
  var theCount = document.getElementById("times").innerHTML=time;
}

#gamespace{
  border:2px solid black ;
  width:500px;
  height:500px;
  top:215px;}
  p{position:absolute;
  border:1px solid black;}
  button{position:absolute;
  top:60px;}
  #here{position:absolute;
  top:45px;
}

<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="firstname" value="0" >
The counter :
<input type="text" name="lastname" value="0">
</form> 
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute">  </div>

if you let `var time = 0;` inside the function `theCounter`, it will be reset each time there is a click, you should move it outside the function, also, it should be `theTree.onclick = theCounter;` or else you bind the result and not the function (to start with, there might be other errors) — Kaddath, Aug 02 '17 at 08:24
Why don't you try debugging your code? Add a break point in the browser and step through your code — eddyP23, Aug 02 '17 at 08:25
Ok i've solved the counter problem .. i want to know how to make a countdown when press start the game — tareq, Aug 02 '17 at 08:33

Hamza Abdaoui · Answer 1 · 2017-08-02T08:36:11.890

You have an error in your javascript :

"message": "Uncaught TypeError: Cannot set property 'innerHTML' of null",

here :

var theCount = document.getElementById("times").innerHTML=time;

You have no element with the id = "times", so if you want the <p> element to contain the count, change the line to :

var theCount = document.getElementById("text").innerHTML=time;

Also, theCounter() function should be like this :

 function theCounter() {  
            time = time + 1 ; 
     document.getElementById("text").innerHTML=time;
          }

      var x_position = 0 ; 
      var theSpace = document.getElementById("gamespace");
      var textt=document.getElementById("text");
      var theMission = document.createTextNode(" - Press the tree as fast as you can ");
      var theTree = document.createElement("img");
      var moving ;
      var time = 0;
      function movingf() {
        theSpace.appendChild(theTree);
        theTree.style.left=Math.floor(Math.random() * 401) + "px";
        theTree.style.right=Math.floor(Math.random() * 401) + "px";
        theTree.style.top=Math.floor(Math.random() * 401) + "px";
        theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
        moving=setTimeout(movingf,500);
        theTree.addEventListener("click",theCounter);
      }
      function theGame() {
        textt.style.clear="both";
        theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
        theTree.style.position="absolute";
        theSpace.appendChild(theTree);
        textt.appendChild(theMission);
        moving=setTimeout(movingf,50);
        theTree.onclick = theCounter();
      }
      function theCounter() {  
        time = time + 1 ; 
 document.getElementById("text").innerHTML=time;
      }

#gamespace {
      border: 2px solid black ;
      width: 500px;
      height: 500px;
      top: 215px;
    }
    p {
      position: absolute;
      border: 1px solid black;
    }
    button {
      position: absolute;
      top: 60px;
    }
    #here {
      position: absolute;
      top: 45px;
    }

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
  </head>
  <body>
    <h1> PICTURE GAME .. </h1>
    <button id="start" onclick="theGame()"> Press here to start the game</button>
    <div id="here">
      <form action="/action_page.php" id="here">
        The countdown :
        <input type="text" name="firstname" value="0" >
        The counter :
        <input type="text" name="lastname" value="0">
      </form> 
    </div>
    <p id="text" style="top:170px"></p>
    <div id="gamespace" style="position:absolute">  </div>

  </body>

Thnx i've solved this problem .. i need now know how to make a countdown .. Thnx — tareq, Aug 02 '17 at 08:37
@tareq take a look at this thread : https://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer — Hamza Abdaoui, Aug 02 '17 at 08:43

score 0 · Answer 2 · answered Aug 02 '17 at 09:03

You were trying to reset your counter inside the theCounter function each time it was called, also tried to set innerHTML of element with id that was not in your markup. After fixing this this you can use setInterval to implement timer countdown:

var x_position = 0 ; 
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving;

function movingf() {
  theTree.style.left=Math.floor(Math.random() * 401) + "px";
  theTree.style.right=Math.floor(Math.random() * 401) + "px";
  theTree.style.top=Math.floor(Math.random() * 401) + "px";
  theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
}

var clicks = 0, gameTimer, movingfTimer, timeleft; 

theSpace.appendChild(theTree);

function theGame() {
  clicks = 0; 
  timeleft = 30;
  document.getElementById("times").value = clicks;
  document.getElementById("countdown").value = timeleft;
  textt.style.clear="both";
  theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
  theTree.style.position="absolute";
  theSpace.appendChild(theTree);
  textt.appendChild(theMission);
  theTree.addEventListener("click", theCounter);
  movingf();
  clearInterval(movingfTimer);
  clearInterval(gameTimer);
  movingfTimer = setInterval(movingf, 500);
  gameTimer = setInterval(function(){
    timeleft--;
    document.getElementById("countdown").value = timeleft;
    if(timeleft <= 0){
      clearInterval(gameTimer);
      clearInterval(movingfTimer);  
      theTree.removeEventListener("click", theCounter);
    }
  }, 1000);
}

function theCounter() {
  clicks++; 
  document.getElementById("times").value = clicks;
}

#gamespace {
  border:2px solid black ;
  width:500px;
  height:500px;
  top:215px;
}
  
p {
  position:absolute;
  border:1px solid black;
}
  
button {
  position:absolute;
  top:60px;
}
  
#here {
  position:absolute;
  top:45px;
}

<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="countdown" id="countdown" />
The counter :
<input type="text" name="times" id="times" value="0" />
</form> 
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute">  </div>

I want to make a game to count the number of clicks on the image in 1 minute

2 Answers2