javascript - Mini "Score Keeper"项目 - 有一些问题

Question

我正在开发一个简单的记分器应用程序，但有一些事情没有按预期工作。

https://codepen.io/Modestas/pen/LjPPVQ

这是我的代码部分:

if ( p1ScoreCount === inputScore.value) {
    p1Span.classList.add("green");
    gameOver = true;
    alert("Player 1 Wins!");
} 

else if ( p2ScoreCount === inputScore.value) {
    p2Span.classList.add("green");
    gameOver = true;
    alert("Player 2 Wins!");
}

if (gameOver === true) {
       p1Button.disabled = true;
       p2Button.disabled = true;
    }

1) 当“P1Span”和“P2Span”等于输入字段的值时，游戏不会结束。我什至尝试使用双重比较运算符，但仍然一无所获。

2) 按重置按钮只会将输入字段重置回默认值 5，但不会将分数重置为 0。

3) 由于某种原因，当通过单击箭头(快速)更改输入值时，存在很大的延迟，并且更改并不总是反射(reflect)在 HTML 中。

如果有人对这些问题有任何意见，我将非常感激。谢谢!

Answer 1

只需进行一些简单的更改

1) 我在点击事件中添加了这些验证 if(p1ScoreCount == inputScore.value) {...}

2)p1Span.innerHTML = 0; p2Span.innerHTML = 0;

3) 这不一定是问题，是事件"change"的返回时间，也可能是"click"事件就是您正在寻找的内容

const p1Span = document.getElementById("p1Span");
const p2Span = document.getElementById("p2Span");
const p1Button = document.getElementById("p1");
const p2Button = document.getElementById("p2");
const inputScore = document.getElementById("inputScore");
const playToSpan = document.getElementById("playToSpan");
const resetButton = document.getElementsByTagName("button")[2];
let gameOver = false;
let p1ScoreCount = 0;
let p2ScoreCount = 0;


// player 1/2 buttons add score to span when clicked.

p1Button.addEventListener("click", () => {
  p1ScoreCount++;
  p1Span.textContent = p1ScoreCount;
  if (p1ScoreCount == inputScore.value) {
    alert("Player 1 Win");
    p1Span.className += " green";
    p1Button.disabled = true;
    p2Button.disabled = true;
    //reset();
  }
});

p2Button.addEventListener("click", () => {
  p2ScoreCount++;
  p2Span.textContent = p2ScoreCount;
  if (p2ScoreCount == inputScore.value) {
    alert("Player 2 Win");
    p2Span.className += " green";
    p1Button.disabled = true;
    p2Button.disabled = true;
  }
});

// specify what you're playing to using text input

inputScore.addEventListener("click", () => {
  playToSpan.textContent = inputScore.value;
});

// reset button resets the game

resetButton.addEventListener("click", function() {
  reset();
});

function reset() {
  gameOver = false;
  p1ScoreCount = 0;
  p2ScoreCount = 0;
  p1Span.innerHTML = 0;
  p2Span.innerHTML = 0;
  inputScore.value = 5;
  p1Span.classList.remove("green");
  p2Span.classList.remove("green");
  p1Button.disabled = false;
  p2Button.disabled = false;
}

.green {
  color: green;
}

<div>
  <h1><span id="p1Span">0</span> to <span id="p2Span">0</span></h1>
  <h3>Playing to: <span id="playToSpan">5</span></h3>
  <input id="inputScore" type="number" value="5">
  <button id="p1">Player One</button>
  <button id="p2">Player Two</button>
  <button id="reset">Reset</button>
</div>