我有一个似乎无法解决的问题。我正在创建一个个性测试，并在提交表单时临时在“答案”框中显示代码，但随后快速刷新页面并清除所有数据。我想知道问题是否出在我的JavaScript函数“ tabulateanswers”上，但我看不到是什么原因引起的。之前，我在javascript中添加了一个弹出框，试图强制停止刷新，我可以看到结果是否正在显示，但是经过一些调整后，我再也无法显示该框。如果有人可以看一下我的JavaScript并指出正确的方向/告诉我我在哪里出错？抱歉，如果无法解决，我无法找到它。
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>
Java：
// 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!";
}
只需使用jQuery：
<form id="form">
<input type="submit" value="Submit" />
</form>
<script>
$("#form").submit(e => {
e.preventDefault();
// Handle form
});
</script>