0

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

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

4

3 回答 3

0

添加class="randomNumber"到闪烁数字的每个跨度。然后使用Document.querySelectorAll()访问它们并遍历调用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>

于 2019-02-07T14:22:59.850 回答
0

我对你的小项目采取了一些自由，我会这样做（使用 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());
});
于 2019-02-07T14:37:49.307 回答
0

您需要将带有回调 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

于 2019-02-07T14:44:19.063 回答