我的javascript输出闪烁了一秒钟，然后消失了

Question

我的Javascript在我得到的最初一眼时给出了正确的输出，但由于某种原因，输出闪烁了一秒钟，然后消失了

我没有使用任何框架，我正在研究基本的Javascript。

我尝试检查控制台的输出，但即使在那里它也会闪烁。 我也在火狐和边缘上尝试过，出现了同样的问题

function MathRandom2() {
  let questionList = [];
  questionList.length = 10;
  let result = [];
  let operator = ['+', '-', '*', '/'];
  var numberRand = 0;
  // question variable will create the question based off the level choice. numberRand will be the limit.
  let question = (Math.floor(Math.random() * numberRand) + 1) + operator[Math.floor(Math.random() * 4)] + (Math.floor(Math.random() * numberRand) + 1);
  let total = 0;
  var username = document.getElementById("username").value;
  //Line 12 to line 37 will check the radio button selection.
  if (document.getElementById("beginner").checked) {
    let result = confirm("Hey " + username + "! You have selected the beginner difficulty. Are you sure you wish to proceed?");
    if (result == true) {
      numberRand = 10;
    } else {
      return 0;
    }
  } else if (document.getElementById("intermediate").checked) {
    let result = confirm("Hey " + username + "! You have selected the intermediate difficulty. Are you sure you wish to proceed?");
    if (result == true) {
      numberRand = 20;
    } else {
      return 0;
    }
  } else if (document.getElementById("advanced").checked) {
    let result = confirm("Hey " + username + "! You have selected the advanced difficulty. Are you sure you wish to proceed?");
    if (result == true) {
      numberRand = 100;
    } else {
      return 0;
    }
  }
  for (let i = 0; i < questionList.length; i++) {
    let answer = parseInt(prompt("What is the answer to " + question));
    let correct = "<span style='background-color: #12CA00'>Your Answer to question </span> " + "<span  style='background-color: #12CA00'>" + i + "</span>" + "<span  style='background-color: #12CA00'> is correct</span>"
    let wrong = "<span style='background-color: #ca0002'>Your Answer to question </span> " + "<span  style='background-color: #ca0002'>" + i + "</span>" + "<span  style='background-color: #ca0002'> is wrong</span>"
    if (answer === eval(question)) {
      result.push(correct);
      question = (Math.floor(Math.random() * numberRand) + 1) + operator[Math.floor(Math.random() * 4)] + (Math.floor(Math.random() * numberRand) + 1);
      total += 2;
    } else {
      result.push(wrong);
      question = (Math.floor(Math.random() * numberRand) + 1) + operator[Math.floor(Math.random() * 4)] + (Math.floor(Math.random() * numberRand) + 1);
    }
  }
  let display = result.join("</br>") + "</br>" + "You have got " + total + " marks";
  document.getElementById("result").innerHTML = display;
  console.log(display);
}

<div id="infoCol_main" class="infoCol_main">
  <script src="../Javascript/tute09.js"></script>
  <form>
    <h1>Welcome</h1>
    <fieldset>
      <label>Please enter your name here: <br><input type="text" id="username"  name="username" required></label><br>
      <label>Please choose your difficulty level: <br>
                    <input type="radio" name="difficulty" id="beginner" value="Beginner"  required>Beginner<br>
                    <input type="radio" name="difficulty" id="intermediate" value="Intermediate" required>Intermediate<br>
                    <input type="radio" name="difficulty" id="advanced" value="Advanced" required>Advanced<br>
                </label>
      <div class="buttonHold">
        <input type="submit" onclick="MathRandom2()" value="Begin">
      </div>
    </fieldset>
  </form>
</div>
<div>
  <p id="result"></p>
</div>

我需要它显示一个答案列表，背景更改为红色或绿色，具体取决于答案是错的还是对的。输出是正确的，我看到了它，但它只存在一瞬间，然后消失enter code here

Answer 1

使用 preventDefault((

事件接口的 preventDefault(( 方法告诉用户代理，如果事件未得到显式处理，则不应像往常一样执行其默认操作。

function MathRandom2() {
 const form = document.getElementById('form');
 form.addEventListener("submit", function(event){
   event.preventDefault(); // prevents form from submitting
 })

function MathRandom2() {
 const form = document.getElementById('form');
 form.addEventListener("submit", function(event){
   event.preventDefault();
 })
  let questionList = [];
  questionList.length = 10;
  let result = [];
  let operator = ['+', '-', '*', '/'];
  var numberRand = 0;
  // question variable will create the question based off the level choice. numberRand will be the limit.
  let question = (Math.floor(Math.random() * numberRand) + 1) + operator[Math.floor(Math.random() * 4)] + (Math.floor(Math.random() * numberRand) + 1);
  let total = 0;
  var username = document.getElementById("username").value;
  //Line 12 to line 37 will check the radio button selection.
  if (document.getElementById("beginner").checked) {
    let result = confirm("Hey " + username + "! You have selected the beginner difficulty. Are you sure you wish to proceed?");
    if (result == true) {
      numberRand = 10;
    } else {
      return 0;
    }
  } else if (document.getElementById("intermediate").checked) {
    let result = confirm("Hey " + username + "! You have selected the intermediate difficulty. Are you sure you wish to proceed?");
    if (result == true) {
      numberRand = 20;
    } else {
      return 0;
    }
  } else if (document.getElementById("advanced").checked) {
    let result = confirm("Hey " + username + "! You have selected the advanced difficulty. Are you sure you wish to proceed?");
    if (result == true) {
      numberRand = 100;
    } else {
      return 0;
    }
  }
  for (let i = 0; i < questionList.length; i++) {
    let answer = parseInt(prompt("What is the answer to " + question));
    let correct = "<span style='background-color: #12CA00'>Your Answer to question </span> " + "<span  style='background-color: #12CA00'>" + i + "</span>" + "<span  style='background-color: #12CA00'> is correct</span>"
    let wrong = "<span style='background-color: #ca0002'>Your Answer to question </span> " + "<span  style='background-color: #ca0002'>" + i + "</span>" + "<span  style='background-color: #ca0002'> is wrong</span>"
    if (answer === eval(question)) {
      result.push(correct);
      question = (Math.floor(Math.random() * numberRand) + 1) + operator[Math.floor(Math.random() * 4)] + (Math.floor(Math.random() * numberRand) + 1);
      total += 2;
    } else {
      result.push(wrong);
      question = (Math.floor(Math.random() * numberRand) + 1) + operator[Math.floor(Math.random() * 4)] + (Math.floor(Math.random() * numberRand) + 1);
    }
  }
  let display = result.join("</br>") + "</br>" + "You have got " + total + " marks";
  document.getElementById("result").innerHTML = display;
}

<div id="infoCol_main" class="infoCol_main">
  <script src="../Javascript/tute09.js"></script>
  <form id="form">
    <h1>Welcome</h1>
    <fieldset>
      <label>Please enter your name here: <br><input type="text" id="username"  name="username" required></label><br>
      <label>Please choose your difficulty level: <br>
                    <input type="radio" name="difficulty" id="beginner" value="Beginner"  required>Beginner<br>
                    <input type="radio" name="difficulty" id="intermediate" value="Intermediate" required>Intermediate<br>
                    <input type="radio" name="difficulty" id="advanced" value="Advanced" required>Advanced<br>
                </label>
      <div class="buttonHold">
        <input type="submit" onclick="MathRandom2()" value="Begin">
      </div>
    </fieldset>
  </form>
</div>
<div>
  <p id="result"></p>
</div>

Answer 2

输入的默认行为是在函数传递后刷新页面。您需要做的就是将其添加到函数的顶部：

function MathRandom2() {
    event.preventDefault();
...