I have an issue that I cant seem to resolve. Im creating a personality test and when I submit the form , temporarily in the "answer box" it will display the code but then quickly refresh the page and clear all the data. Im wondering if the issue is with my javascript function "tabulateanswers" is breaking but I cant see what would be causing it. I previously added a pop up box to the javascript to attempt to force stop the refresh and I could see if the results were being displayed but after a bit of tweaking I can no longer get this box to display either. If anyone can take a look at my javascript and point me in the right direction / tell me where Im going wrong? Apologies if this has been answered I could not locate it searching.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Personality test</title>
<meta name="description" content="Personality test">
<meta name="author" content="RD">
<link rel="stylesheet" href="test.css">
</head>
<header>
<h1>An online personality test based on the AAA </h1>
</header>
</br>
<body>
<script src="test.js"></script>
<div id="wrapper">
<form id="quiz">
<!-- Question 1 -->
<h2>I prefer to do things with others rather than on my own.</h2>
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label><input type="radio" name="q1" value="c1">
1 - Definitely Agree
</label><br />
<label><input type="radio" name="q1" value="c2">
2 - Slightly Agree
</label><br />
<label><input type="radio" name="q1" value="c3">
3 - Slightly Disagree
</label><br />
<label><input type="radio" name="q1" value="c4">
4 - Definitely Disagree
</label><br />
<hr>
<!-- Question 47 -->
<h2>I enjoy meeting new people.</h2>
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label><input type="radio" name="q46" value="c1">
1 - Definitely Agree
</label><br />
<label><input type="radio" name="q46" value="c2">
2 - Slightly Agree
</label><br />
<label><input type="radio" name="q46" value="c3">
3 - Slightly Disagree
</label><br />
<label><input type="radio" name="q46" value="c4">
4 - Definitely Disagree
</label><br />
<hr> <!-- Question 48 -->
<h2>I am a good diplomat.</h2>
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label><input type="radio" name="q47" value="c1">
1 - Definitely Agree
</label><br />
<label><input type="radio" name="q47" value="c2">
2 - Slightly Agree
</label><br />
<label><input type="radio" name="q47" value="c3">
3 - Slightly Disagree
</label><br />
<label><input type="radio" name="q47" value="c4">
4 - Definitely Disagree
</label><br />
<hr> <!-- Question 49 -->
<h2>I am not very good at remembering people's date of birth.</h2>
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label><input type="radio" name="q48" value="c1">
1 - Definitely Agree
</label><br />
<label><input type="radio" name="q48" value="c2">
2 - Slightly Agree
</label><br />
<label><input type="radio" name="q48" value="c3">
3 - Slightly Disagree
</label><br />
<label><input type="radio" name="q48" value="c4">
4 - Definitely Disagree
</label><br />
<hr> <!-- Question 50 -->
<h2>I find it very easy to play games with children that involve pretending.</h2>
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label><input type="radio" name="q49" value="c1">
1 - Definitely Agree
</label><br />
<label><input type="radio" name="q49" value="c2">
2 - Slightly Agree
</label><br />
<label><input type="radio" name="q49" value="c3">
3 - Slightly Disagree
</label><br />
<label><input type="radio" name="q49" value="c4">
4 - Definitely Disagree
</label><br />
<hr>
</br>
<button type="submit" id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>
</form>
</br>
<div id="answer">Your result will show up here!</div>
</body>
</html>
Javascript:
// function to calculate the result of the survey
function tabulateAnswers() {
// initialize variables for each choice's score
// If you add more choices and outcomes, you must add another variable here.
var c1score = 0;
var c2score = 0;
var c3score = 0;
var c4score = 0;
// get a list of the radio inputs on the page
var choices = document.getElementsByTagName('input');
// loop through all the radio inputs
for (i=0; i<choices.length; i++) {
// if the radio is checked..
if (choices[i].checked) {
// add 1 to that choice's score
if (choices[i].value == 'c1') {
c1score = c1score + 1;
}
if (choices[i].value == 'c2') {
c2score = c2score + 2;
}
if (choices[i].value == 'c3') {
c3score = c3score + 3;
}
if (choices[i].value == 'c4') {
c4score = c4score + 4;
}
// If you add more choices and outcomes, you must add another if statement below.
}
}
// Find out which choice got the highest score.
// If you add more choices and outcomes, you must add the variable here.
var answer = c1score + c2score + c3score + c4score ;
// Display answer corresponding to that choice
var answerbox = document.getElementById('answer');
answerbox.innerHTML = fullanswer;
alert("I am an alert box!");
}
// program the reset button
function resetAnswer() {
var answerbox = document.getElementById('answer');
answerbox.innerHTML = "Your result will show up here!";
}
If you called tabulateAnswers onsubmit, you'd be able to return false; at the end of it and prevent this behaviour
Since you're using onclick, you'll also want to prevent the default action from happening like so:
function tabulateAnswers(_event) {
...
_event.preventDefault();
return false;
}
Another option is to use the button input type instead that doesn't trigger a form submission.