Question

我有一个游戏的javascript / html程序，其中提示用户输入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元素。我将click事件处理程序移动到了每个树编号，以便this引用number元素本身。我还添加标志clickedAfterRefresh，以禁用得分更新几次在一个周期。另外，您的input1和input元素是输入类型的-我将它们更改为跨度类型，因为输入元素旨在接受用户交互，例如键入。还将光标类型更改为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>

Answer 2

您的问题是如何使用this计算分数。您已经在顶部有一个score变量，可以保留计数，另一件事是您的if比较，它是与HTML OBJECT而不是该项目的值进行比较。

在这里您有:)检查point()是我唯一更改的内容。

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 scoreInput = document.getElementById("input1")
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) {
  const value = document.getElementById("input").value;
  const number1Val = number1.innerHTML;
  const number2Val = number2.innerHTML;
  const number3Val = number3.innerHTML;

  if (number1Val === value || number1Val === value || number1Val === value) {
    score += 1;
  } else {
    score -= 1;
  }
  scoreInput.value = score;


}

function stopGame() {
  score = 0;
  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 3

有几个问题，当您捕获事件时，您是在父母那里做的，很难知道事件的来源。您可以在每一行中做到这一点，并将输入的值与加或减的分数相加。

[4.0, 2.0, 1.0, 4.0]

var score = 0;
var scoreOutput = document.getElementById("input1");
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) {
     let numberSelected = x.querySelector('span').innerText;
     console.log(numberSelected);
     if( numberSelected == document.getElementById("input").value)
	 {
	    score+= 1;
	 }
	 else
	 {
	    score-= 1;
	 }
     scoreOutput.value = score;
}

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;
}

游戏计数器不做增量-Javascript

3 个答案: