javascript - Why does it skips 5th alert box? -
i tried submit without selecting radio button numbers. should alert me 7 times. however, got 6! seems skips 5th alert box. , don't know reason why. can me? thanks!
<html> <head> <style type="text/css"> h1{ width:100%; background-color:maroon; color:white; } fieldset{ width:500px; margin:auto; } </style> <script> function checkanswers(){ var inputs = document.queryselectorall('input[type="radio"]'); var check = 0; var score = 0,i=0; for(i;i<inputs.length;i++){ var inputname = inputs[i].getattribute("name"); var checker = document.getelementsbyname(inputname); var counter = false; for(j=0;j<checker.length;j++){ if(checker[j].checked == true){ counter = true; += 4; break; } } if(counter == false){ alert("must answer question number" + " " + inputname + "!"); document.getelementbyid('hg-' + inputname).style.backgroundcolor = "red"; += 4; check++; } else{ document.getelementbyid('hg-' + inputname).style.backgroundcolor = "white"; } } if(check == 0){ for(i=0;i<inputs.length;i++){ var inputname = inputs[i].getattribute('name'); var msg = document.getelementbyid('msg-' + inputname); var store; if(inputs[i].value == "yes" && inputs[i].checked == true){ msg.innerhtml = 'correct answer!'; document.getelementbyid('msg-' + inputname).style.color = "green"; document.getelementbyid('hg-' + inputname).style.backgroundcolor = "white"; score++; } else if(inputs[i].value == "no" && inputs[i].checked == true){ msg.innerhtml = 'wrong answer!'; document.getelementbyid('msg-' + inputname).style.color = "red"; document.getelementbyid('hg-' + inputname).style.backgroundcolor = "yellow"; document.getelementbyid('hg-' + inputname).style.backgroundcolor = "white"; } } document.getelementbyid("score").innerhtml="your score is:" + score; return false; } return false; } </script> </head> <body> <form name="myform" onsubmit="return checkanswers()" id="form"> <center><h1>questions</h1></center> <fieldset><br /> <div id="hg-one"> <span id="msg-one"></span> <span>1.) simple design language intended simplify process of maing web pages presentable.</span><br /> </div><br /> <input name="one" type="radio" value="yes" /><span id="hg-one">a. css</span><br /> <input name="one" type="radio" value="no" />b. html <br /> <input name="one" type="radio" value="no" />c. xml <br /> <input name="one" type="radio" value="no" />d. bootstrap <br /><br /> </fieldset> <br /><br /> <fieldset><br /> <div id="hg-two"> <span id="msg-two"></span> <span>2.) eiffel tower located?</span><br /></div><br /> <input name="two" type="radio" value="no" />a. miag ao<br /> <input name="two" type="radio" value="yes" /><span id="hg-two">b. paris</span><br /> <input name="two" type="radio" value="no" />c. madrid<br /> <input name="two" type="radio" value="no" />d. korea<br /> </fieldset> <br /><br /> <fieldset><br /> <div id="hg-three"> <span id="msg-three"></span> <span>3.) country produces proton cars?</span><br /></div><br /> <input name="three" type="radio" value="no" />a. indonesia <br /> <input name="three" type="radio" value="yes" /><span id="hg-three">malaysia</span><br /> <input name="three" type="radio" value="no" />c. japan<br /> <input name="three" type="radio" value="no" />d. south korea<br /> </fieldset> <br /><br /> <fieldset><br /> <div id="hg-four"> <span id="msg-four"></span> <span>4.) name of tallest structure ever built?</span><br /></div><br /> <input name="four" type="radio" value="no" />a. grollo tower <br /> <input name="four" type="radio" value="no" />b. cn tower<br /> <input name="four" type="radio" value="yes" /><span id="hg-four">c. burj khalifa</span><br /> <input name="four" type="radio" value="no" />d. taipei 101<br /> </fieldset> <br /><br /> <fieldset><br /> <div id="hg-five"> <span id="msg-five"></span> <span>5.) type of creature children's animated character pingu?</span><br /></div><br /> <input name="five" type="radio" value="no" />a. porcupine <br /> <input name="five" type="radio" value="no" />b. pony<br /> <input name="five" type="radio" value="no" />c. pelican<br /> <input name="five" type="radio" value="yes" /><span id="hg-five">d. penguin</span> <br /> </fieldset> <br /><br /> <fieldset><br /> <div id="hg-six"> <span id="msg-six"></span> <span>6.) longest river in pakistan?</span><br /></div><br /> <input name="six" type="radio" value="no" />a. incara <br /> <input name="six" type="radio" value="no" />b. indeema<br /> <input name="six" type="radio" value="no" />c. indira<br /> <input name="six" type="radio" value="yes" /><span id="hg-six">d. indus</span> <br /> </fieldset> <br /><br /> <fieldset><br /> <div id="hg-seven"> <span id="msg-seven"></span> <span>6.) longest river in pakistan?</span><br /></div><br /> <input name="seven" type="radio" value="no" />a. incara <br /> <input name="seven" type="radio" value="no" />b. indeema<br /> <input name="seven" type="radio" value="no" />c. indira<br /> <input name="seven" type="radio" value="yes" /><span id="hg-seven">d. indus</span> <br /> </fieldset> <center><input type="submit" name='submit' value="submit" /><br /><br /> <span id="score"></span><br /> </form> </body> </html>
change
i += 4;
to
i += 3;
since in for(i;i<inputs.length;i++) doing i++.
Comments
Post a Comment