这是我关于stackoverflow的第一个问题。
我正在学习JavaScript，并决定启动一个项目。我正在制作一个记分牌，以跟踪乒乓球比赛中的得分。我设法完成了这项工作，并决定添加一些功能，例如比赛历史记录，并显示必须服务的球员。但是，我陷入了ReferenceError。在与此有关的大多数其他问题中，人们只是忘记添加变量，或者它与jquery有关。我不认为这不是我的问题。
在乒乓球中，发球的球员每2点更换一次。我决定添加scorePlayer1和scorePlayer2来制作totalScore。当将其除以2时，我可以检查它是否为整数，如果为整数，发球的球员会发生变化。但是，无论我尝试什么，都没有定义变量totalScore。
我首先在w3schools.com学习了HTML / CSS，后来又用它来学习javascript。我已将代码粘贴到多个语法检查器中，但是没有错误。
该按钮可以选择发球球员。然后，我想在砍下2分后再向对方球员发球。我用功能changeServePlayer尝试过。但是，当我在Chrome中尝试此操作并在控制台中键入：totalScore时，它将返回Uncaught ReferenceError。为什么会发生这种情况，或者有更好的方法实现目标？
我在这里使用的代码：
var currentScorePlayerOne = 0;
var currentScorePlayerTwo = 0;
var currentServePlayer;
var totalScore;
window.addEventListener("keyup", checkKeyPress);
function checkKeyPress(key) {
if (key.keyCode == "90" && currentScorePlayerOne != 0) { //Z
document.getElementById('scorePlayerOne').innerHTML = --currentScorePlayerOne;
changeServePlayer();
changeServeIcon();
}
if (key.keyCode == "88") { //X
document.getElementById('scorePlayerOne').innerHTML = ++currentScorePlayerOne;
changeServePlayer();
changeServeIcon();
}
if (key.keyCode == "78" && currentScorePlayerTwo != 0) { //N
document.getElementById('scorePlayerTwo').innerHTML = --currentScorePlayerTwo;
changeServePlayer();
changeServeIcon();
}
if (key.keyCode == "77") { //M
document.getElementById('scorePlayerTwo').innerHTML = ++currentScorePlayerTwo;
changeServePlayer();
changeServeIcon();
}
updateSet();
}
function updateSet() {
if (currentScorePlayerOne > 10 && currentScorePlayerOne > currentScorePlayerTwo + 1) {
resetScores();
}
if (currentScorePlayerTwo > 10 && currentScorePlayerTwo > currentScorePlayerOne + 1) {
resetScores();
}
}
function resetScores() {
currentScorePlayerOne = 0;
currentScorePlayerTwo = 0;
document.getElementById('scorePlayerOne').innerHTML = currentScorePlayerOne;
document.getElementById('scorePlayerTwo').innerHTML = currentScorePlayerTwo;
}
function changeServePlayer() {
totalScore = currentScorePlayerOne + currentScorePlayerTwo;
Number.isInteger(totalScore / 2);
if (Number.isInteger == true && totalScore != 0 && currentServePlayer == 1) {
currentServePlayer = 2;
}
if (Number.isInteger == true && totalScore != 0 && currentServePlayer == 2) {
currentServePlayer = 1;
}
}
function changeServeIcon() {
if (currentServePlayer == 1) {
document.getElementById('serveP1').style.opacity = "1";
document.getElementById('serveP2').style.opacity = "0.2";
} else {
document.getElementById('serveP2').style.opacity = "1";
document.getElementById('serveP1').style.opacity = "0.2";
}
}<!DOCTYPE html>
<html>
<head>
<script src="Scoreboard1javascript.js"></script>
</head>
<body>
<button type="button" onclick="chooseServingPlayer()">
Serve
</button>
<script>
var randomServeNumber;
function chooseServingPlayer() {
if (currentScorePlayerOne == 0 && currentScorePlayerTwo == 0) {
document.getElementById('serveP1').style.opacity = "0.2";
document.getElementById('serveP2').style.opacity = "0.2";
randomServeNumber = Math.floor(Math.random() * 10);
if (randomServeNumber > 5) {
currentServePlayer = 1;
changeServeIcon();
} else {
currentServePlayer = 2;
changeServeIcon();
}
}
}
function changeServeIcon() {
if (currentServePlayer == 1) {
document.getElementById('serveP1').style.opacity = "1";
document.getElementById('serveP2').style.opacity = "0.2";
} else {
document.getElementById('serveP2').style.opacity = "1";
document.getElementById('serveP1').style.opacity = "0.2";
}
}
</script>
<nav>
<img src="tafeltennisbat.png" alt="serve" style="width: 50px; height: 50px; opacity: 0.2" id="serveP1"> Score P1
</nav>
<nav>
Score P2
<img src="tafeltennisbat.png" alt="serve" style="width: 50px; height: 50px; opacity: 0.2" id="serveP2">
</nav>
<nav id="scorePlayerOne" style="font-size: 50px">
0
</nav>
<nav id="scorePlayerTwo" style="font-size: 50px">
0
</nav>
</body>
</html>我忘了检查我的html脚本中正在引用哪个文件。我指的是旧版本的javascript，这使我在javascript中所做的所有更改都变得无用。
有时候真的很愚蠢...