HTML Flickering when using JS function

Question

I am trying to change text in html using the DOM. I have a form with 2 radio buttons and a submit button. When submitted, it runs a JS function that should change text in HTML to reflect what answer they chose. However, whenever you click the submit button, it changes the text and then instantly flickers back to what the html shows. Why is it doing this? I've never seen this before. Here is the code...

function answerNext()
{
 if(document.getElementById("question1").checked == true)
 {
  document.getElementById("qtext").innerText="You chose the first option";
 }else if (document.getElementById("question2").checked == true)
 {
  documet.getElementById("qtext").innerText="You chose the second option";
 }else
 {
  document.getElementById("qtext").innerText="You chose neither option";
  document.getElementById("testdiv").innerHTML="<h1>You clicked next</h1>";
 }
}

<!doctype html>
<html>
 <head>
  <title>Dog Personailty Quiz</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <script src="js/script.js"></script>
 </head>
 <body>
  <h1>Is now a good time to get a dog?</h1>
  <h2 id="qtext">Do you like to run a lot</h2>
  <div id="testdiv"></div>
  <form>
   <input type="radio" id="question1" value="option1"> Option 1
   <input type="radio" id="question2" value="option1"> Option 2
   <input type="submit" value="Next" onclick="answerNext();">
  </form>
 </body>
</html>

Ideally, code posted in a snippet actually behaves as described. Can you make that happen? — isherwood, Nov 21 '18 at 20:41
Your js is changing the text, then the form submits which reloads the page which resets the text back to normal. There are many ways to prevent a form from submitting which I am sure you can find on google. — takendarkk, Nov 21 '18 at 20:41
Possible duplicate of [Onclick shouldn't trigger form data submission](https://stackoverflow.com/questions/11223591/onclick-shouldnt-trigger-form-data-submission) — Randy Casburn, Nov 21 '18 at 20:53

score 1 · Accepted Answer · answered Nov 21 '18 at 21:11

First of all, you could change the input's attribute type to "button" but if you wish to keep it as a submit button you'll need to stop the forms submit event to prevent the page navigating away/refreshing.

You do this by using the first argument of the event's function. The first argument holds the event that was triggered. If the browser doesn't support this, there is a fallback using window.event (we are checking this first because some browsers only support the argument and some only the window.event).

Stop browser from triggering the submit event using this example:

function answerNext(evt)
{
    if (evt == null)
    {
        evt = window.event;
    }

    evt.preventDefault();
    evt.stopPropagation();

    . . .

Secondly, you'll want to group the ratio inputs so only one can be selected at a time. Do this by creating a fieldset element and adding the name attribute to the inputs, connecting them to that group:

<fieldset id="group1">
    <input type="radio" id="question1" value="option1" name="group1"> Option 1
    <input type="radio" id="question2" value="option2" name="group1"> Option 2
</fieldset>

Also, there was an error in the if else statement where there's a typo documet should be document.

Try out this code I've fixed for you:

function answerNext(evt)
{
 if (evt == null)
 {
  evt = window.event;
 }
  
  evt.preventDefault();
 evt.stopPropagation();
  
  if(document.getElementById("question1").checked == true)
 {
  document.getElementById("qtext").innerText="You chose the first option";
 }else if (document.getElementById("question2").checked == true)
 {
  document.getElementById("qtext").innerText="You chose the second option";
 }else
 {
  document.getElementById("qtext").innerText="You chose neither option";
  document.getElementById("testdiv").innerHTML="<h1>You clicked next</h1>";
 }
}

fieldset#group1
{
  border: none;
  display: inline;
}

<!DOCTYPE html>
<html>
 <head>
  <title>Dog Personailty Quiz</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <script src="js/script.js"></script>
 </head>
 <body>
  <h1>Is now a good time to get a dog?</h1>
  <h2 id="qtext">Do you like to run a lot</h2>
  <div id="testdiv"></div>
  <form>
      <fieldset id="group1">
        <input type="radio" id="question1" value="option1" name="group1"> Option 1
        <input type="radio" id="question2" value="option2" name="group1"> Option 2
      </fieldset>
   <input type="submit" value="Next" onclick="answerNext();">
  </form>
 </body>
</html>

isherwood · Answer 2 · 2018-11-21T20:51:24.673

Change your button type from submit to just button so the form doesn't actually submit.

<input type="button" value="Next" onclick="answerNext();">

You'll also want to fix the typo (documet) and implement a radio group to prevent both from being selected. Finally, wrap your radio buttons and their text in label elements for accessibility and better usability (the label text becomes clickable).

Demo of all that

function answerNext() {
  if (document.getElementById("question1").checked == true) {
    document.getElementById("qtext").innerText = "You chose the first option";
  } else if (document.getElementById("question2").checked == true) {
    document.getElementById("qtext").innerText = "You chose the second option";
  } else {
    document.getElementById("qtext").innerText = "You chose neither option";
    document.getElementById("testdiv").innerHTML = "<h1>You clicked next</h1>";
  }
}

<h1>Is now a good time to get a dog?</h1>
<h2 id="qtext">Do you like to run a lot</h2>
<div id="testdiv"></div>
<form>
  <label><input type="radio" id="question1" value="option1" name="blah"> Option 1</label>
  <label><input type="radio" id="question2" value="option1" name="blah"> Option 2</label>
  <input type="button" value="Next" onclick="answerNext(event);">
</form>

HTML Flickering when using JS function

2 Answers2