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>

Answer 2

我对您的小项目有些自由，我会像这样（用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

您需要将具有回调fn的事件侦听器添加到生成的元素。要么给它们分配相同的类，然后通过遍历nodeList来添加侦听器。

我只为演示删除了一个内联JS。

整个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;
   }
   }

那应该做，这是codepen

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

无法点击生成的元素？

3 个答案: