未捕获的 ReferenceError：未定义变量？（不涉及 jQuery）答案

【问题标题】：Uncaught ReferenceError: variable is not defined? (no jQuery involved)未捕获的 ReferenceError：未定义变量？（不涉及 jQuery）
【发布时间】：2020-02-19 15:51:22
【问题描述】：

这是我关于stackoverflow的第一个问题。

我正在学习 javascript，并决定开始一个项目。我正在做一个记分牌来记录乒乓球比赛的比分。我设法完成了这项工作，并决定添加一些功能，例如比赛历史并显示必须为哪个球员发球。但是，我遇到了 ReferenceError。在有关此的大多数其他问题中，人们只是忘记添加变量，或者它与 jquery 有关。我不认为这是我的问题。

在乒乓球比赛中，发球者每 2 分更换一次。我决定添加 scorePlayer1 和 scorePlayer2 来制作总分数。当这个除以 2 时，我可以检查这是否是一个整数，如果是，发球的球员就会改变。但是，无论我尝试什么，变量 totalScore 都没有定义。

我首先在 w3schools.com 学习了 HTML/CSS，后来用它来学习 javascript。我已将代码粘贴到多个语法检查器中，但没有出现错误。

该按钮用于选择发球者。然后，我想在得到2分后将发球权给对方球员。我用函数 changeServePlayer 试过这个。但是，当我在 Chrome 中尝试此操作并在控制台中输入：totalScore 时，它会返回未捕获的 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>

【问题讨论】：

打开 { 未在 if 关闭
该代码缺少checkKeyPress 函数，您应该将代码包装在您设置keyup 侦听器的行和声明changeServePlayer 的行之间，在声明checkKeyPress 的函数中。如果“多个语法检查器”中没有任何错误，我认为缺少右花括号只是帖子中的拼写错误？
这是一个错字导致的错误，因此应该关闭。
是的，很抱歉。 if 语句未关闭只是复制粘贴错误。
既然您已经查看了其他问题并且能够看到他们忘记定义变量，请再次检查您的代码并问自己这个问题：“我在哪里定义了key？”

标签： javascript console.log referenceerror

【解决方案1】：

我忘记检查我在我的 html 脚本中引用了哪个文件。我引用了旧版本的 javascript，这使得我在 javascript 中所做的每一个更改都毫无用处。

有时候真的会这么傻……

【讨论】：