+ 1

Please help me with this problem in HTML,JS

I am new to web developing. just learnt html, css, js. decided to make a small quiz but it is not working. please help. this is html code:- <!DOCTYPE html> <html> <head> <title>Short quiz</title> <script type="text/javascript" src="script.js"></script> </head> <body> <p>What is Batman's real name?</p> <form> <input type="radio" name = "bw" id = "bw">Bruce Wayne<br> <input type="radio" name = "bw" id = "zr">Zack Ryder<br> <input type = "radio" name = "bw" id = "jg">Jim Gordon<br> <input type = "button" name = "submit" id = "sb" value = "Submit"><br> </form> </body> </html> and here is js code:- if(document.getElementById("sb").onclick){ if(document.getElementById("bw").checked){ alert("Correct answer")} else if(document.getElementById("zr'").checked){ alert("Wrong answer")} else if(document.getElementById("jg").checked){ alert("Wrong answer")} } but when i open the webpage, select a option and submit not alert pops. pls help. both html and js are in same folder.

html web js

5th Nov 2017, 9:58 AM

Shantanu Shinde

9 odpowiedzi

+ 3

Be more accurate: only once answer will still get an error... read it closely, and you will know where, so you can fix the typo mistake reminding: the second getElementById call had an unexpected quote in the id name string: "zr'" should be "zr" ^^ (By using the shortwriten version you will not get any errors ;P)

6th Nov 2017, 3:20 AM

visph

+ 4

You missuse the 'onclick' event listener... you need to set the 'onclick' attribute of the targeted input, and set your code in a function called from there: <!DOCTYPE html> <html> <head> <title>Short quiz</title> <script type="text/javascript" src="script.js"></script> </head> <body> <p>What is Batman's real name?</p> <form> <input type="radio" name = "bw" id = "bw">Bruce Wayne<br> <input type="radio" name = "bw" id = "zr">Zack Ryder<br> <input type = "radio" name = "bw" id = "jg">Jim Gordon<br> <input type = "button" name = "submit" id = "sb" value = "Submit" onclick="button_click();"><br> </form> <script> </script> </body> </html> //if(document.getElementById("sb").onclick){ function button_click() { if (document.getElementById("bw").checked) { alert("Correct answer") } else if (document.getElementById("zr").checked) { alert("Wrong answer") } else if(document.getElementById("jg").checked) { alert("Wrong answer") } } (changes are on <input type="button"> and on first line of your script... added some indentation and spaces for readability ;))

5th Nov 2017, 10:13 AM

visph

+ 4

Semi-colons are not always mandatory in JS ;) You could ommit them in numberous cases, firstly when next is a closing brackets...

5th Nov 2017, 10:22 AM

visph

+ 3

Obviously you can shorten your script: function button_click() { if (document.getElementById("bw").checked) alert("Correct answer"); else alert("Wrong answer"); }

5th Nov 2017, 10:14 AM

visph

+ 1

@Shantanu Shinde: It's not respectuous to delete your reply, no more than not upvote useful answers, and not marking the best answer ^^

6th Nov 2017, 3:32 AM

visph

+ 1

I don't think the best answer was this complementary one: don't you think too than the most useful answer was the first, were I correct the whole code? If I've do the remark about best answer mark, it was not for get it for me, but to use them for their first purpose: setting usefulest answer at top ^^

6th Nov 2017, 3:38 AM

visph

+ 1

yes @visph is all right

27th Dec 2017, 1:53 PM

Ayush