私はプログラミングに慣れていません。私が直面している現在の問題は、チェックボックスの質問の正解を表示していないことです。質問番号は4です。たとえば、質問4の選択で正しい答えが表示されません。質問番号4が正しいことを確認してください。チェックボックスフォームの検証javascript
Javascriptを:
myTimer = setTimeout('alert("Time out")', 600000); /*alert will appear after 60 second*/
function processMyForm() {
var chosenans1 = document.mainForm.answer1.value;
var a1;
//alert(document.mainForm.answer1.value);
//alert(document.getElementById('answer2'));
var chosenans2 = document.getElementById('answer2').value;
var a2;
var chosenans4 = document.mainForm.answer4.checked;
var a4;
// ----------------------------
var total;
// --------------------------------
if (chosenans1 == "England") /*if radio value of answer1 is "England"*/ {
a1 = 2; /*correct answer for 2 marks*/
document.getElementById("result1").innerHTML = "<span class='correct'>Your answer to question 1 is correct.</span> "; /*print out correct at bottom of the page at <div id = "result1">*/
} else {
a1 = -1; /*incorrect answer for -1 mark*/
document.getElementById("result1").innerHTML = "<span class='incorrect'>The correct answer to question 1 is 'England'.</span>"; /*print out incorrect at <div id = "result1">*/
}
// ---------------------
if (chosenans2 == "Stonehenge") {
a2 = 2;
document.getElementById("result2").innerHTML = "<span class='correct'>Your answer to question 2 is correct.</span>";
} else {
a2 = -1;
document.getElementById("result2").innerHTML = "<span class='incorrect'>The correct answer to question 2 is 'Stonehenge'.</span>";
}
// -------------------
if (chosenans3 == "2012") {
a3 = 2;
document.getElementById("result3").innerHTML = "<span class='correct'>Your answer to question 3 is correct.</span>";
} else {
a3 = -1;
document.getElementById("result3").innerHTML = "<span class='incorrect'>The correct answer to question 3 is '2012'.</span>";
}
// ---------------------
if (chosenans4 == "River Thames") {
a4 = 2;
document.getElementById("result4").innerHTML = "<span class='correct'>Your answer to question 4 is correct.</span>";
} else {
a4 = -1;
document.getElementById("result4").innerHTML = "<span class='incorrect'>The correct answer to question 4 is 'River Thames'.</span>";
}
// --------------------------------------------------------
total = a1 + a2 + a3 + a4 ;//+ a5 + a6; /*add marks(2 or -1) together*/
document.getElementById("result").innerHTML = ("Your mark is " + total); //print out your total mark at <div id = "result">
alert("Your mark is " + total); //prompt total mark in small window
if (total < 4) {
document.body.style.backgroundImage = "none"; //remove background image
document.body.style.backgroundColor = "#bb0000"; //add a background colour
} else {
document.body.style.backgroundImage = "none";
document.body.style.backgroundColor = "#006600";
}
clearTimeout(myTimer); //stop timer
}
function getValue(qArray) { //get value from radio array
var i;
for (i = 0; i < qArray.length; i++) {
if (qArray[i].checked) return qArray[i].value;
}
return "";
}
HTML:
<form id="mainForm" name="mainForm">
<p>1: London belongs to:</p><br>
<input type="radio" name="answer1" value="England">England<br/>
<input type="radio" name="answer1" value="Scotland">Scotland<br/>
<input type="radio" name="answer1" value="Wales">Wales<br/>
<input type="radio" name="answer1" value="Northern Ireland">Northern Ireland<br/>
<!--radio buttons with different values-->
<br>
<p>2: Which of the following is not in London:</p><br>
<select id="answer2">
<option value="">Select an answer</option>
<option value="St Paul's Cathedral">St Paul's Cathedral</option>
<option value="Buckingham Palace">Buckingham Palace</option>
<option value="Stonehenge">Stonehenge</option>
</select>
<br><br>
<br>
<p>4: Which river runs through London:</p>
<br>
<input type="checkbox" name="answer4" value="La Seine">La Seine<br>
<input type="checkbox" name="answer4" value="Rhine River">Rhine River<br>
<input type="checkbox" name="answer4" value="River Thames">River Thames<br>
<br>
<input type="button" onclick="processMyForm()" value="Check answers">
<!--a button called "Check answers" will run processMyForm procedure when user click-->
</form>
<!--print out user's total mark-->
<br/>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<div id="result"></div>
あなたは彼らが答えていることを確認したいのですか、答えが正しいことを確認したいですか?知識が豊富なユーザーが回答を見ることができる同じページに回答を含めることで、検証はサーバー側で行う必要があります。 – happymacarts
質問番号4が正しいことを確認してください。 –
None validation –