Javascript 问答测验不起作用

Question

here is my code. I want to make a javascript based quiz for mcqs. There is a problem while making the verify() function. How to select the user selected option and then match it with the correct answer of that question and tell the status? Thanks

 function verify() { var correct = 1; var selected = 0; if (getElementByID.r1) selected = 1; if (selected == correct) window.alert("You are right"); else window.alert("You WRong!!!"); }

 <img src="//placekitten.com/g/50/50" alt="x" /> <br><br><br> <input type="radio" id=r1 /><strong>1. </strong> <p id=ans1>This is cloud</p> <br /> <input type="radio" id=r2 /><strong>2. </strong> <p id=ans2>This is hat</p> <br /> <input type="radio" id=r3 /><strong>3. </strong> <p id=ans3>This is rough</p> <br /> <input type="radio" id=r4 /><strong>4. </strong> <p id=ans4>This is none</p> <br /> <input type="button" onclick=verify(); value="send" /> <input type="button" onclick=reveal(); value="Reveal Solution" />

Answer 1

With radio buttons, you want them all to have the same name . That way when you check one, the others will be unchecked.

Also, getElementByID.r1 doesn't do anything. getElementById (note the capitalization) is a property of document and is a function .

document.getElementById('r1')

Then, with radio buttons, you use the .checked property to see if it was checked or not.

if (document.getElementById('r1').checked) selected = 1;

Here's an updated demo:

 function verify() { var correct = 1; var selected = 0; if (document.getElementById('r1').checked) selected = 1; if (selected == correct) window.alert("You are right"); else window.alert("You WRong!!!"); }

 <img src="//placekitten.com/g/50/50" alt="x" /> <br><br><br> <input type="radio" name="quiz" id=r1 /><strong>1. </strong> <p id=ans1>This is cloud</p> <br /> <input type="radio" name="quiz" id=r2 /><strong>2. </strong> <p id=ans2>This is hat</p> <br /> <input type="radio" name="quiz" id=r3 /><strong>3. </strong> <p id=ans3>This is rough</p> <br /> <input type="radio" name="quiz" id=r4 /><strong>4. </strong> <p id=ans4>This is none</p> <br /> <input type="button" onclick=verify(); value="send" /> <input type="button" onclick=reveal(); value="Reveal Solution" />