时间戳

首页 > 解决方案 > 单击按钮时出现“找不到文件”错误

javascript - 单击按钮时出现“找不到文件”错误

问题描述

这是我网站的应用程序，我不太明白它有什么问题。我有同事在看它，我们不能完全弄清楚错误在哪里。

这应该是一个猜数字的游戏，其中生成一个随机数，用户应该猜它；根据您与答案的接近程度，颜色应该会改变。但是，当单击按钮时，它会弹出一个未找到文件的错误。

const int = document.getElementById("Guess");
const LowOrHigh = document.querySelector("LowOrHigh");
const TimesGuessed = document.querySelector("TimesGuessed");
const WinOrLose = document.querySelector("WinOrLose");
let numberOfGuesses = 0;
const Color = document.querySelector("#Guess");
const RandomNumber = Math.random() * (100 - 1) + 1;
const win = "false";

const THEGODDAMBUTTON = document.getElementById("TreasureSubmitButton").addEventListener("click", Hey);

function Hey(int) {
  let Guess = parseInt(int.valueOf);

  if (RandomNumber === Guess) {
    Color.style.backgroundColor = "#007F00";
    Color.style.color = "#ffffff";
    TimesGuessed.innerHTML('You have guessed ${numberOfGuesses} times');
    win = "correct";
  } else if (Guess > RandomNumber - 10 && Guess < RandomNumber || Guess < RandomNumber + 10 && Guess > RandomNumber) {
    Color.style.backgroundColor = "#990000";
    Color.style.color = "#ffffff";
    numberOfGuesses++;
    if (Guess > RandomNumber) {
      LowOrHigh.innerHTML("Too high!");
    } else if (Guess < RandomNumber) {
      LowOrHigh.innerHTML("Too small!");
    }
    TimesGuessed.innerHTML('You have guessed ${numberOfGuesses} times');
    WinOrLose.innerHTML("Good guess, try again!");
  } else if (Guess > RandomNumber - 30 && Guess < RandomNumber || Guess < RandomNumber + 30 && Guess > RandomNumber) {
    Color.style.backgroundColor = "#000099";
    Color.style.color = "#ffffff";
    numberOfGuesses++;
    if (Guess > RandomNumber) {
      LowOrHigh.innerHTML("Too high!");
    } else if (Guess < RandomNumber) {
      LowOrHigh.innerHTML("Too small!");
    }
    TimesGuessed.innerHTML('You have guessed ${numberOfGuesses} times');
    WinOrLose.innerHTML("Good guess, try again!");
  } else {
    Color.style.backgroundColor = "#ffffff";
    Color.style.color = "#000000";
    numberOfGuesses++;
    if (Guess > RandomNumber) {
      LowOrHigh.innerHTML("Too high!");
    } else if (Guess < RandomNumber) {
      LowOrHigh.innerHTML("Too small!");
    }
    TimesGuessed.innerHTML('You have guessed ${numberOfGuesses} times');
    WinOrLose.innerHTML("Good guess, try again!");
  }
}
console.log(RandomNumber);
<div id="TreasureHunt">
  <form action=submit method="post">
    <fieldset id="guessFieldset">
      <legend><strong>Please enter a number between 1 and 100</strong></legend>
      <p>
        <label for="Number:">Number:</label>
        <input type="number" min="1" max="100" id="Guess" name="Guess">
      </p>
      <button type="submit" id="TreasureSubmitButton">Guess!</button>
      <button type="submit" id="TreasureRestartButton">New game</button>
    </fieldset>
    <fieldset id="hintFieldset">
      <legend><strong>Hint</strong></legend>
      <p id="LowOrHigh"></p>
      <p id="TimesGuessed"></p>
      <p id="WinOrLose"></p>
    </fieldset>
  </form>
  <p>In this game, your job is to guess the a number between 1 and 100! During the game, in the hint area, there will be displayed a color, if you are too high or too low and how many guesses you've had. Once you get the right number the hint area will shine
    in green and you can restart the game by clickin new game. Try to guess wi the least guesses possible!</p>
</div>

标签： javascripthtml

解决方案

这里发生了几件事。首先，找不到文件是因为它正在寻找一个名为“提交”的文件，因为你有： <form action=submit method="post">. 您不需要此属性，也不需要 ，method="post"因为您没有将表单数据发送到任何地方。

发生的第二件事是您没有将 Hey() 函数传递给 int。由于您没有使用 post，因此表单数据不会去任何地方。当您调用 Hey() 时，您需要传入，document.getElementById('Guess').value因为那是您拥有它的地方，或者执行以下操作：

// no args
function Hey() {
  let Guess = document.getElementById('Guess').value;

希望有帮助！

推荐阅读