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

Question

我乍看之下，我的Javascript给出了正确的输出，但是由于某种原因，输出会快速闪烁一秒钟然后消失

我没有使用任何框架，而是在开发基本Javascript。

我尝试检查控制台的输出，但即使在那也只是闪烁。我也在firefox和edge上尝试过，并且出现了相同的问题

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

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

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

Answer 2

使用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>