У меня проблема, которую я не могу решить. Я создаю личностный тест, и когда я отправляю форму, временно в «поле ответа» он отображает код, но затем быстро обновляет sh страницу и очищает все данные. Мне интересно, не работает ли моя функция javascript "tabulateanswers", но я не могу понять, что могло бы ее вызвать. Ранее я добавил всплывающее окно к javascript, чтобы попытаться принудительно остановить refre sh, и я мог видеть, отображаются ли результаты, но после небольшой настройки я больше не могу отображать это окно. Если кто-нибудь может взглянуть на мой 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>
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!";
}