无法点击生成的元素？

Question

I'm trying to design a simple game but I've encountered an issue that got me stuck for hours despite trying various methods hence, unable to move on. The game I'm creating is basically by selecting the correct input number, I would gain a point. However, if I click onto the wrong number the points would decrease.

The issue is as follows: -> After creating a generated random number of integer 1-9, I am unable to click the generated number to gain or decrease a point.

 var choosenNumber; function startGame() { choosenNumber = prompt("Please choose a number between 1-9"); document.getElementById("answer1").innerHTML = choosenNumber; var blinkNumbers = setInterval(autoNumbers, 1000); } function autoNumbers() { document.getElementById("randomNumber").innerHTML = Math.floor(Math.random() * 10); document.getElementById("randomNumber2").innerHTML = Math.floor(Math.random()* 10); document.getElementById("randomNumber3").innerHTML = Math.floor(Math.random()* 10); } function pointSystem() { var x ; if (x == choosenNumber) document.getElementById("score1").innerHTML = "" + 1 ; } 

 <div id="a"> <button onClick="startGame()">Start Game</button> <button onClick="stopGame()">Stop Game</button> <br /> <span>Your chosen number is:</span>&nbsp;<span id="answer1"></span><br /> <span>Your score so far:</span><span id="score1"></span><br /> <span id="randomNumber" onClick="pointSystem()" style="color:red; font-size:70px"></span> <span id="randomNumber2" onClick="pointSystem()" style="color:orange; font-size:70px"></span> <span id="randomNumber3" onClick="pointSystem()" style="color:blue; font-size:70px"></span> </div> 

Answer 1

Add class="randomNumber" to each span of blinking Numbers. Then use to access them and iterate through which call the pointSystem() . I also added variable score .

 var choosenNumber; //this contain score var score = 0; document.querySelectorAll('.randomNumber').forEach(span =>{ //e.target.innerHTML is innerHTML of 'span' clicked span.addEventListener('click', (e) => pointSystem(e.target.innerHTML)) }) function startGame() { choosenNumber = prompt("Please choose a number between 1-9"); document.getElementById("answer1").innerHTML = choosenNumber; var blinkNumbers = setInterval(autoNumbers, 1000); } function autoNumbers() { document.getElementById("randomNumber").innerHTML = Math.floor(Math.random() * 10); document.getElementById("randomNumber2").innerHTML = Math.floor(Math.random()* 10); document.getElementById("randomNumber3").innerHTML = Math.floor(Math.random()* 10); } function pointSystem(num) { //num will be the innerHTML of span clicked what we passed into the function from event listener which is e.target.innerHTML if (num == choosenNumber){ //increase score by 1 score++; document.getElementById("score1").innerHTML = score; } } 

 <div id="a"> <button onClick="startGame()">Start Game</button> <button onClick="stopGame()">Stop Game</button> <br /> <span>Your chosen number is:</span>&nbsp;<span id="answer1"></span><br /> <span>Your score so far:</span><span id="score1"></span><br /> <span id="randomNumber" style="color:red; font-size:70px"></span> <span id="randomNumber2" style="color:orange; font-size:70px" class="randomNumber"></span> <span id="randomNumber3" style="color:blue; font-size:70px" class="randomNumber"></span> </div> 

Answer 2

I took some liberty with your little project, i would do it a bit like this (with jquery)

https://jsfiddle.net/7c0y9u84/20/

let choosenNumber;
let blinkNumbers;
let score = 0;

$('#start-button').click(() => {
    if (blinkNumbers === undefined) {
    choosenNumber = prompt("Please choose a number between 1-9");
    $('#answer1').html(choosenNumber);
    blinkNumbers = setInterval(() => {
      $('#randomNumber1').html(Math.floor(Math.random() * 10));
      $('#randomNumber2').html(Math.floor(Math.random() * 10));
      $('#randomNumber3').html(Math.floor(Math.random() * 10));
    }, 1000);
  }
});

$('#stop-button').click(() => {
    clearInterval(blinkNumbers);
  blinkNumbers = undefined;
});

function pointSystem(number) {
  if (number == choosenNumber) {
    score++;
  } else {
    score--;
  }
  $('#score1').html(score);
}

$('#randomNumber1').click(() => {
    pointSystem($('#randomNumber1').text());
});
$('#randomNumber2').click(() => {
    pointSystem($('#randomNumber2').text());
});
$('#randomNumber3').click(() => {
    pointSystem($('#randomNumber3').text());
});

Answer 3

You need to add an event Listener with callback fn to the generated element. Either assign the same class to them, then add the listener by iterating over the nodeList.

I have only removed one inline JS for the demo.

The whole JS

 function pointSystem(numberPassed)   {// user input as argument
  var score = 0;// define score
  var output = 
  document.getElementById("score1");// cache the output element
  output.innerText = " " + score; // use innerTEXT, innerHTML removes eventListeners!
  console.log(score); // checking
  if (numberPassed === choosenNumber){
  score++;
  output.innerText = score;
   }
   }

That should do, here is the codepen

https://codepen.io/damPop/pen/JxMPBv?editors=0010