2016-12-19 4 views
-1

私はプログラミングに慣れていません。私が直面している現在の問題は、チェックボックスの質問の正解を表示していないことです。質問番号は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> 
+0

あなたは彼らが答えていることを確認したいのですか、答えが正しいことを確認したいですか?知識が豊富なユーザーが回答を見ることができる同じページに回答を含めることで、検証はサーバー側で行う必要があります。 – happymacarts

+0

質問番号4が正しいことを確認してください。 –

+0

None validation –

答えて

0

あなたは開口部<form name="mainForm">、あなたは "結果" の要素を追加する必要があるように見える を去ったと仮定すると。

id="result4"の要素がないため、結果のinnerHTMLの割り当て(例:document.getElementById("result4").innerHTML = ...)にエラーが発生しています。

あなたは正しい結果メッセージが表示された見たい場所をこのようなものを追加します。

<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"> 
 
\t <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>

+0

これらの変更を適用しても正しい答えが表示されません –

+0

@UsmaanGill、作業コードスニペットを追加しました – chester

0

は、このソリューションが悪い心に留めておくが、それはせずに、あなたの問題を解決しますすべてのコード構造を変更する

最初に:川のテムズラインにIDを追加できます。

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

秒:真または偽ので

if (chosenans4) { 
//your code 

に対して今検証がある:idが代わりに

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

3番目の値を取得するチェックされているかどうかをチェックするためにはJavaScriptを変更これはあなたが選択されているすべてのオプションを開いたままにしておきますが、あなたはそれが本当であると言いますが、それはあなたがここに示したものとは異なる問題になるでしょう!それが助けてくれることを願って:) btwはここで働くバイダルです:https://jsfiddle.net/zxfh1jad/