迷你 "Score Keeper" 项目 - 有几个问题

Question

我正在开发一个简单的计分器应用程序，但有一些功能没有按预期运行。

这是我的部分代码：

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) 由于某些原因，当通过单击箭头（快速）更改输入值时，会有很多滞后并且更改并不总是反映在 HTML。

如果有人对这些问题有任何意见，我将不胜感激。谢谢！

Answer 1

只需一些简单的更改

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

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

3)这不一定是问题，是return事件的时间"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>

迷你 "Score Keeper" 项目 - 有几个问题

Mini "Score Keeper" Project - Having a Few Issues

javascript

project