Question

我是编程新手。我面临的当前问题是缺乏显示复选框问题的正确答案。问题编号是4，例如问题4的选择将不会显示正确的答案泰晤士河。确保问题编号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

假设你离开了开场<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>

Answer 2

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

首先：让我们在River Thames行添加一个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/

验证复选框形式javascript

2 个答案: