Databases
StackOverflow2013
Postsdbo
PORadioButton always returning false - JavaScript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORadioButton always returning false - JavaScript
    text
    copied!<p>I have a HTML page that have many section with inputs consisting of <code>RadioButtons</code> and <code>CheckBox</code>. The first one of them is like this:</p> <pre><code>&lt;div style="margin-top: 30px; height: 270px;"&gt; &lt;input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/&gt;True&lt;br/&gt; &lt;input type="radio" name="Answers" title="False" onclick="setAnswered();" /&gt;False &lt;/div&gt; &lt;div id="replaceAble1_a" style="display: none;"&gt;Answer1&lt;/div&gt; </code></pre> <p>After the final input I am looking for each input and investigating that the correct answers are checked. Here is the part of script that is doing this job:</p> <pre><code>var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(","); for (var k = 0; k &lt; ansList.length; k++) { var ele = document.getElementById(ansList[k]); result = result &amp; ele.checked ; } </code></pre> <p>where <code>thisFrame</code> for this iteration is <code>replaceAble1</code>. Upon debugging it is clear that I am getting the correct element id in <code>ansList[k]</code> i.e. <code>Answer1</code>. Now the problem is, every time, whether the <code>Answer1</code> is checked or not <code>ele.checked</code> is returning <code>false</code>. What could be the reason?</p> <p><strong>Update:</strong></p> <p>I think it would better to put complete code. So here it is:</p> <pre><code>&lt;div id="replaceAble1"&gt; &lt;span style="font-size: 14pt ;margin-top: 5px;"&gt;Q &lt;span id ="question1"&gt;Do you live in Pakistan?&lt;/span&gt; &lt;/span&gt; &lt;div style="margin-top: 30px; height: 270px;"&gt; &lt;input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/&gt;True&lt;br/&gt; &lt;input type="radio" name="Answers" title="False" onclick="setAnswered();" /&gt;False &lt;/div&gt; &lt;div id="replaceAble1_a" style="display: none;"&gt;Answer1&lt;/div&gt; &lt;div id="replaceAble1_n" style="display: none;"&gt;null&lt;/div&gt; &lt;/div&gt; &lt;div id="replaceAble2" style="display: none;"&gt; &lt;span style="font-size: 14pt ;margin-top: 5px;"&gt;Q. &lt;span id ="question2"&gt;Do you go for cycling daily?&lt;/span&gt; &lt;/span&gt; &lt;div style="margin-top: 30px; height: 270px;"&gt; &lt;input type="radio" name="Answers" title="True" onclick="setAnswered();" /&gt;True&lt;br/&gt; &lt;input id="Answer2" type="radio" name="Answers" title="False" onclick="setAnswered();" /&gt;False &lt;/div&gt; &lt;div id="replaceAble2_a" style="display: none;"&gt;Answer2&lt;/div&gt; &lt;div id="replaceAble2_n" style="display: none;"&gt;null&lt;/div&gt; &lt;/div&gt; &lt;div id="replaceAble3" style="display: none;"&gt; &lt;span style="font-size: 14pt ;margin-top: 5px;"&gt;Q &lt;span id ="question3"&gt;When Do you Sleep?&lt;/span&gt; &lt;/span&gt; &lt;div style="margin-top: 30px; height: 270px;"&gt; &lt;input id="notAnswer1" type="checkbox" name="Answers" title="True" onclick="setAnswered();"/&gt;Morning&lt;br/&gt; &lt;input id="notAnswer2" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Evening&lt;br/&gt; &lt;input id="Answer3" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Night &lt;/div&gt; &lt;div id="replaceAble3_a" style="display: none;"&gt;Answer3&lt;/div&gt; &lt;div id="replaceAble3_n" style="display: none;"&gt;notAnswer1,notAnswer2&lt;/div&gt; &lt;/div&gt; &lt;div id="replaceAble4" style="display: none;"&gt; &lt;span style="font-size: 14pt ;margin-top: 5px;"&gt;Q &lt;span id ="question4"&gt;What Do you Eat?&lt;/span&gt; &lt;/span&gt; &lt;div style="margin-top: 30px; height: 270px;"&gt; &lt;input id="Answer4" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Launch&lt;br/&gt; &lt;input id="Answer5" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Break Fast&lt;br/&gt; &lt;input id="Answer6" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Dinner&lt;br/&gt; &lt;/div&gt; &lt;div id="replaceAble4_a" style="display: none;"&gt;Answer4,Answer5,Answer6&lt;/div&gt; &lt;div id="replaceAble4_n" style="display: none;"&gt;null&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the script is:</p> <pre><code>var i = 0; var answered = false; var score = 0; var unitScore = 5; var totalScore = 20; var frameList = ["replaceAble1", "replaceAble2", "replaceAble3", "replaceAble4"]; function setAnswered() { answered = true; } function displayAnswer(isTimeUp) { var Message; var j; if (isTimeUp) { Message = "Times Up"; } else { Message = "Quiz End"; } for (j = 0; j &lt; frameList.length; j++) { var result = true; var thisFrame = frameList[j]; var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(","); for (var k = 0; k &lt; ansList.length; k++) { var ele = document.getElementById(ansList[k]); result = result &amp; ele.checked ; } ansList = document.getElementById(thisFrame + "_n").innerHTML.split(","); for (var k = 0; k &lt; ansList.length; k++) { if (ansList[k] !== "null") result = result &amp; (!document.getElementById(ansList[k]).checked); } if (result) { score = Number(score) + Number(unitScore); } } document.getElementById("QuestionPan").style.display = "none"; document.getElementById("resultPan").style.display = "block"; document.getElementById("message").innerHTML = Message; document.getElementById("totalMarks").innerHTML = totalScore; document.getElementById("score").innerHTML = score; var timetaken = count - document.getElementById("time").innerHTML; document.getElementById("timetaken").innerHTML = timetaken + " minutes"; } function submition() { if (!answered) { alert("Please select at least one Answer for this question."); return; } if (i === (frameList.length - 1)) { displayAnswer(false); return; } document.getElementById(frameList[i++]).style.display = "none"; document.getElementById(frameList[i]).style.display = "block"; document.getElementById("counter").innerHTML = (Number(i) + 1) + '/' + frameList.length; answered = false; } </code></pre> <p>Only the first answer i.e. <code>Answer1</code> is causing this problem. Every thing else is working fine.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload