验证复选框表单javascript

Question

我是编程新手。我目前面临的问题是无法显示复选框问题的正确答案。题号为 4，例如选择题 4 将不会显示正确答案 River Thames。确保第 4 题是正确的。

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>

Answer 1

请记住，这个解决方案很糟糕，但它会在不更改所有代码结构的情况下解决您的问题

首先：让我们为泰晤士河线添加一个 id。

<input type="checkbox" id="correct" name="answer4" value="River Thames">River Thames<br>

第二个：更改javascript以检查是否检查了id而不是获取值

var chosenans4 = document.getElementById('correct').checked;

第三个：验证现在是针对真假所以

if (chosenans4) {
//your code

这将使您对所有被选择的选项保持开放，并且您仍然说这是真的，但这将是与您在此处提出的问题不同的问题！希望它有所帮助:) 顺便说一句，这是一个工作小提琴：https://jsfiddle.net/zxfh1jad/

Answer 2

假设您离开了开头<form name="mainForm">， 看起来您需要添加“结果”元素。

innerHTML 赋值的结果，例如：document.getElementById("result4").innerHTML = ...，由于没有带有id="result4" 的元素而引发错误。

在您希望看到显示正确结果消息的地方添加类似这样的内容：

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<div id="result5"></div>
<div id="result6"></div>
<div id="result"></div>

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 chosenans3 = document.mainForm.answer3.value;
var a3;
//alert(document.mainForm.answer3.value);

var chosenans4 = document.mainForm.answer4.checked;
var a4;


var chosenans5 = document.mainForm.answer5.value;
var a5;

var chosenans6 = document.mainForm.answer6.value;
var a6;



// ----------------------------

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>";
}

// -------------------------

if (chosenans5 == "Pound") {
a5 = 2;
document.getElementById("result5").innerHTML = ("<span class='correct'>Your answer to question 5 is correct.</span>");
} else {
a5 = -1;
document.getElementById("result5").innerHTML = ("<span class='incorrect'>The correct answer to question 5 is 'Pound'.</span>");
}

if (chosenans6 == "David Cameron") {
a6 = 2;
document.getElementById("result6").innerHTML = ("<span class='correct'>Your answer to question 6 is correct.</span>");
} else {
a6 = -1;
document.getElementById("result6").innerHTML = ("<span class='incorrect'>The correct answer to question 6 is 'David Cameron'.</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 "";
}

<form 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>

<p>3: Which year's Olympic games was hosted by London:</p>
<br>
<input type="radio" name="answer3" value="2012">2012<br/>
<input type="radio" name="answer3" value="2008">2008<br/>
<input type="radio" name="answer3" value="2004">2004<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/><p>5: What is the name of the currency used in London:</p>
<br>
<input type="radio" name="answer5" value="Dollar">Dollar<br/>
<input type="radio" name="answer5" value="Pound">Pound<br/>
<input type="radio" name="answer5" value="Euro">Euro<br/>






<br/><p>6: Who is the current Prime Minister of the UK (2014):</p>
<br>
<input type="radio" name="answer6" value="Tony Blair">Tony Blair<br/>
<input type="radio" name="answer6" value="Gordon Brown">Gordon Brown<br/>
<input type="radio" name="answer6" value="David Cameron">David Cameron<br/>


<br>


<input type="button" onclick="processMyForm()" value="Check answers">
<!--a button called "Check answers" will run processMyForm procedure when user click-->

</form>

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<div id="result5"></div>
<div id="result6"></div>
<div id="result"></div>