javascript - 游戏计数器不增加 - Javascript

Question

我有一个游戏的 javascript/html 程序，它提示用户输入 0 到 9 之间的数字(含 0 到 9)。当我点击数字时，我的分数计数器不会根据我点击的数字而上升或下降。如果它是错误的数字，分数应该减去 1，反之亦然。下面是我的代码片段。

var score = 0;
var scoreOutput = score;
var refresh;
var number = document.getElementById("input").value;
var number1 = document.getElementById("firstNum"); 
var number2 = document.getElementById("secondNum");
var number3 = document.getElementById("thirdNum");
var alertsc;

function startGame() {
    var number = prompt("Enter an integer between 0 to 9");
	
	if (number != null) {
      document.getElementById("input").value = number;
    }
	 document.getElementById("input1").value = score;

     alertsc = setInterval(generateNum, 2000);
	  
}

function generateNum() {
     var number1 = document.getElementById("firstNum"); 
     var number2 = document.getElementById("secondNum");
     var number3 = document.getElementById("thirdNum");

     number1.innerHTML = Math.floor(Math.random() * 10);
	 number2.innerHTML = Math.floor(Math.random() * 10);
	 number3.innerHTML = Math.floor(Math.random() * 10);
}

function point(x) {
     if( number1 == document.getElementById("input").value)
	 {
	    x.scoreOutput+= 1;
	 }
	 else if( number2 == document.getElementById("input").value)
	 {
	    x.scoreOutput+= 1;
	 }
	 else if( number3 == document.getElementById("input").value)
	 {
	    x.scoreOutput+= 1;
	 }
	 else
	 {
	    x.scoreOutput-= 1;
	 }
}

function stopGame() {
     clearInterval(alertsc);
}

#input{
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: green;
  font-size: 150%;

}

#input1{
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: red;
  font-size: 150%;

}

#firstNum {
    color: red;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#secondNum {
    color: orange;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#thirdNum {
    color: blue;
	margin: 40px;
	width: 100%;
	font-size: 500%;
}

#firstNum:target, #secondNum:target, #thirdNum:target {
  display:inline;
}

<h2>Part 3</h2>
<button type="submit" onclick="startGame()">Start Game</button> &nbsp 
<button type="submit" onclick="stopGame()">Stop Game</button> <br>

<h1>Your chosen number is:&nbsp <input type="text" id="input"></h1>
<h1>Your score so far: &nbsp <input type="text" id="input1"></h1>
<table>
    <tr onclick="point(this)">
	     <td>
		 <h1>
		 <span style="cursor:hand" id="firstNum"></span>
		 </h1>
         </td> 
		 
		 <td>
		 <h1>
		 <span style="cursor:hand" id="secondNum"></span>
		 </h1>
		 </td>
		 
		 <td>
		 <h1>
		 <span style="cursor:hand" id="thirdNum"></span> 
		 </td>
    </tr>
</table>

Answer 1

我更改了几项内容以使其按预期工作。 您没有将分数写入 input1 元素。我将点击事件处理程序移至每个树编号，以便 this 引用编号元素本身。我还添加了标志 clickedAfterRefresh 以在一个周期内多次禁用分数更新。您的 input1 和 input 元素也是输入类型 - 我将它们更改为 span 类型，因为输入元素旨在接受用户交互，例如输入。还将光标类型更改为 pointer 以显示手。还清除了一些重复或不需要的变量。

var score = 0;
var number = document.getElementById("input");
var number1 = document.getElementById("firstNum");
var number2 = document.getElementById("secondNum");
var number3 = document.getElementById("thirdNum");
var scoreElement = document.getElementById("input1");
var alertsc;

var clickedAfterRefresh = false;

function startGame() {
  var chosenNumber = prompt("Enter an integer between 0 to 9");

  if (chosenNumber != null) {
    number.innerHTML = chosenNumber;
  }
  scoreElement.innerHTML = score;

  alertsc = setInterval(generateNum, 2000);
}

function generateNum() {
  number1.innerHTML = Math.floor(Math.random() * 10);
  number2.innerHTML = Math.floor(Math.random() * 10);
  number3.innerHTML = Math.floor(Math.random() * 10);
  clickedAfterRefresh = false;
}

function updateScore(x) {
  score += x;
  var scoreElement = document.getElementById("input1");
  scoreElement.innerHTML = score;
}

function point(target) {
  if (clickedAfterRefresh === true) {
    return;
  }

  if (target.innerHTML === number.innerHTML) {
    updateScore(1);
  } else {
    updateScore(-1);
  }
  clickedAfterRefresh = true;
}

function stopGame() {
  clearInterval(alertsc);
}

#input {
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: green;
  font-size: 150%;
}

#input1 {
  width: 4%;
  border: none;
  background-color: #FFFFFF;
  color: red;
  font-size: 150%;
}

#firstNum {
  color: red;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#secondNum {
  color: orange;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#thirdNum {
  color: blue;
  margin: 40px;
  width: 100%;
  font-size: 500%;
}

#firstNum:target,
#secondNum:target,
#thirdNum:target {
  display: inline;
}

<h2>Part 3</h2>
<button type="submit" onclick="startGame()">Start Game</button> &nbsp
<button type="submit" onclick="stopGame()">Stop Game</button> <br>

<h1>Your chosen number is:&nbsp <span id="input"></span></h1>
<h1>Your score so far: &nbsp <span id="input1"></span></h1>
<table>
  <tr>
    <td>
      <h1>
        <span style="cursor: pointer;" onclick="point(this)" id="firstNum"></span>
      </h1>
    </td>

    <td>
      <h1>
        <span style="cursor: pointer;" onclick="point(this)" id="secondNum"></span>
      </h1>
    </td>

    <td>
      <h1>
        <span style="cursor: pointer;" onclick="point(this)" id="thirdNum"></span>
      </h1>
    </td>
  </tr>
</table>