javascript - 无法单击生成的元素？

Question

我正在尝试设计一个简单的游戏，但我遇到了一个问题，尽管尝试了各种方法，但还是卡住了几个小时，因此无法继续。 我正在创建的游戏基本上是通过选择正确的输入数字，我会获得一分。但是，如果我点击错误的数字，积分就会减少。

问题如下: -> 创建生成的整数 1-9 的随机数后，我无法单击生成的数字来获得或减少分数。

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

将 class="randomNumber" 添加到闪烁数字的每个范围。然后使用 Document.querySelectorAll() 访问它们并迭代 addEventListener 调用pointSystem()。我还添加了变量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>