My javascript output flashes for a second and then disappears

Question

My Javascript is giving out the right output at the initial glance i get but for some reason the output flashes for a quick second and then disappears

I am not using any frameworks and I am working on basic Javascript.

I've tried checking the console for the output but even there it just flashes. I also tried it on firefox and edge and the same issue arises

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>

I need it to show a list of answers with the background changed to red or green depending on if the answer was wrong or right respectively. The output is correct and I see it but its only there for a split second before it disappearsenter code here

Answer 1

let Name; const submit = document.getElementById('submit').onclick = function(event) { enter code hereevent.preventDefault() Name = document.getElementById('Namee').value; console.log(Name);

To prevent the page from reloading, you can use event.preventDefault() in your event handler if you're handling a form submission or button click:

Answer 2

Use preventDefault()

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

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 3

The default behaviour of the input is to refresh the page once the function has passed. All you need to do is to add this to the top of your function:

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