How can I reset time in a simple game?

Question

I've tried make simple clicking game (if time count is higher than 5, the game is over, but you can reset time if you click generated element).

Unfortunately time is still counting. How can I fix this?

Why do I get this error?

Uncaught TypeError: Cannot set property 'textContent' of null
    at js.js:8
    at js.js:49

(function() {
  const startGame = document.querySelector('button')

  let time = 0;
  let roll = true;
  let h2 = document.querySelector('h2')
  h2.textContent = time;

  const timeFlow = () => {
    time++
  }
  const resetTime = () => {
    time = 0;
    console.log(time)
  }

  const rollBall = () => {
    if (roll == true) {
      let divCreator = document.createElement('div')
      document.body.appendChild(divCreator)
      divCreator.classList.add('square')
      divCreator.style.backgroundColor = 'red'
      divCreator.style.top = Math.floor(Math.random() * 99) + '%'
      divCreator.style.left = Math.floor(Math.random() * 99) + '%'
      divCreator.addEventListener('click', letsPlay)
      divCreator.addEventListener('click', resetTime)
      setInterval(timeFlow, 1000)
    } else if (roll == false) {
      roll = true;
    }
  }

  const letsPlay = (e) => {
    let start = document.body.removeChild(e.target)
    roll = false;

    if (time >= 5) {
      alert('U lost')
    } else {
      rollBall()
    }
  }

  startGame.addEventListener('click', rollBall)
})();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button>Generate</button>
  <script src='js.js'></script>
  <h2>Time</h2>
</body>

</html>

Your second question is a duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/q/14028959/4642212). As to your first question: I don’t see you outputting `time` anywhere as it is updated, only when it is reset. How do you know `time` gets incremented? — Sebastian Simon, Jan 07 '21 at 10:01

score 0 · Answer 1 · edited Jan 07 '21 at 10:08

Your HTML code is in the wrong order: the <h2> element and the <script> element should be switched.

You should change it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link rel="stylesheet" href="style.css">
</head>
<body>
    <button>Generate</button>
    <h2>Time</h2>
    <script src='js.js'></script>
</body>
</html>

mplungjan · Accepted Answer · 2021-01-07T10:15:21.827

You can use the load event instead of an IIFE before the elements exist.

Also your div needs dimensions

Also I assume you want the time in the H2?

Also you need position absolute to move the div

Lastly I clear the interval before a new one

window.addEventListener("load", function() {
  const startGame = document.querySelector('button')
  const h2 = document.querySelector('h2')
  let tId;

  let time = 0;
  let roll = true;
  h2.textContent = time;


  const timeFlow = () => {
    time++
    h2.textContent = time;
  }
  const resetTime = () => {
    time = 0;
  }

  const rollBall = () => {
    if (roll == true) {
      let divCreator = document.createElement('div')
      document.body.appendChild(divCreator)
      divCreator.classList.add('square');
      divCreator.style.height = '50px'
      divCreator.style.width = '50px'
      divCreator.style.backgroundColor = 'red'
      divCreator.style.position = 'absolute'
      divCreator.style.top = Math.floor(Math.random() * 99) + '%'
      divCreator.style.left = Math.floor(Math.random() * 99) + '%'
      divCreator.addEventListener('click', letsPlay)
      divCreator.addEventListener('click', resetTime)
      clearInterval(tId); // remove any running interval
      tId = setInterval(timeFlow, 1000)
    }
    roll = !roll;

  }

  const letsPlay = (e) => {
    let start = document.body.removeChild(e.target)
    roll = false;

    if (time >= 5) {
      alert('U lost')
    } else {
      roll = true; // right?
      rollBall()
    }
  }

  startGame.addEventListener('click', rollBall)
})

body {
  height: 100%;
  background-color: yellow;
}

<button>Generate</button>
<h2>Time</h2>

How can I reset time in a simple game?

2 Answers2