CODEWITHSUNDEEP
javascripthtml
Renz
Renz

Reputation: 13

HTML Flickering when using JS function

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>

Upvotes: 1

Views: 1911

Answers (2)

Studio KonKon
Studio KonKon

Reputation: 790

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>

Upvotes: 1

isherwood
isherwood

Reputation: 61083

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>

Upvotes: 0

Related Questions