Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Got the problem. The problem was with HTML not the JavaScript. I have by mistake set the <code>name</code> field of all inputs same i.e. <code>Answer</code>. Hence all the radio button in all <code>replaceable</code> <code>div</code>s were belonging to same group. So when I set the <code>Answer2</code> of <code>replaceable2</code> the radio button of <code>replaceable1</code> is reset. Being invisible I was't able to track this bug. So simply I changed the html to </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="Answers1" title="True" onclick="setAnswered();"/&gt;True&lt;br/&gt; &lt;input type="radio" name="Answers1" 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="Answers2" title="True" onclick="setAnswered();" /&gt;True&lt;br/&gt; &lt;input id="Answer2" type="radio" name="Answers2" 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="Answers3" title="True" onclick="setAnswered();"/&gt;Morning&lt;br/&gt; &lt;input id="notAnswer2" type="checkbox" name="Answers3" title="False" onclick="setAnswered();" /&gt;Evening&lt;br/&gt; &lt;input id="Answer3" type="checkbox" name="Answers3" 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="Answers4" title="False" onclick="setAnswered();" /&gt;Launch&lt;br/&gt; &lt;input id="Answer5" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" /&gt;Break Fast&lt;br/&gt; &lt;input id="Answer6" type="checkbox" name="Answers4" 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; </code></pre> <p>And it worked properly.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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