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

我正在尝试设计一个简单的游戏，但是遇到了一个问题，尽管尝试了各种方法，但仍使我陷入困境，无法继续前进。
我正在创建的游戏基本上是通过选择正确的输入数字，我会得到一点。但是，如果我单击错误的数字，则得分将减少。

问题如下：
->创建生成的整数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>

最佳答案

在每个闪烁的数字范围内添加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>

关于javascript - 无法点击生成的元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54575090/