javascript - 为什么在javascript中的另一个函数中使用函数时按钮不起作用？

Question

我正在从 udemy 学习 DOM 并停留在这里，没有任何提示说明为什么当我格式化我的代码并尝试在事件侦听器函数值中使用函数时它会停止工作。

这是原始代码

let secretNumber = Math.round(Math.random() * 99) + 1;
let score = 20;
let highscore = 0;

document.querySelector(".check").addEventListener("click", function () {
  const guess = Number(document.querySelector(".guess").value);

  //Main Function used for DOM queryselection
  const displayFunct = function (className, message) {
    document.querySelector(className).textContent = message;
  };

  //When there is no input
  if (!guess) {
    displayFunct(".message", "No Value");
  }
  //When player Wins
  else if (guess === secretNumber) {
    displayFunct(".message", "Correct Number ");

    document.querySelector("body").style.backgroundColor = "#60b347";

    document.querySelector(".number").style.width = "30rem";

    if (score > highscore) {
      highscore = score;
    }
    displayFunct(".highscore", highscore);
  }
  // When guess is wrong
  else if (guess !== secretNumber) {
    if (score > 1) {
      displayFunct(".message", guess > secretNumber ? "Too HIGH" : " Too LOW");
      score--;
      displayFunct(".score", score);
    } else {
      displayFunct(".message", "You Lose!!!!");
      displayFunct(".score", 0);
    }
  }
});

//Coding Challenge 1
document.querySelector(".again").addEventListener("click", function () {
  secretNumber = Math.round(Math.random() * 99) + 1;
  score = 20;

  //Messages Default
  document.querySelector(".number").textContent = "?";
  document.querySelector(".message").textContent = "Start guessing...";
  document.querySelector(".score").textContent = score;
  document.querySelector(".guess").value = "";

  //CSS Default
  document.querySelector("body").style.backgroundColor = "#222";
  document.querySelector(".number").style.width = "15rem";
});

在 Message default 下的 Coding Challenge 1 部分中，每当我使用 DisplayFunc() 而不是前 3 个代码行时，按钮再次停止重置我的代码。

这就是我想要的样子，但它没有发生。

//Coding Challenge 1
document.querySelector(".again").addEventListener("click", function () {
  secretNumber = Math.round(Math.random() * 99) + 1;
  score = 20;

  //Messages Default
  DisplayFunc("number", "?" )
  DisplayFunc(".message", "Start guessing..." )
  DisplayFunc(".score",score)
  document.querySelector(".guess").value = "";

  //CSS Default
  document.querySelector("body").style.backgroundColor = "#222";
  document.querySelector(".number").style.width = "15rem";
});

标签： javascripthtmlcss

Answer 1

问题是您的displayFunct. 您在内部定义了它，document.querySelector(".check").addEventListener("click", function () {但您试图在另一个函数中使用它document.querySelector(".again").addEventListener("click", function () {。那永远行不通。
将它移到第一个函数之外，两个函数都可以使用它。在您调用的第二个函数中，DisplayFunc而不是displayFunct，所以这也是错误的。

let secretNumber = Math.round(Math.random() * 99) + 1;
let score = 20;
let highscore = 0;

//Main Function used for DOM queryselection
const displayFunct = function (className, message) {
  document.querySelector(className).textContent = message;
};

document.querySelector(".check").addEventListener("click", function () {
...