简体   繁体   中英

Calculate score using input from radio buttons

I want to use the function check() and pass the names of the radio buttons through it in order to register the input from all the buttons. but it seems i can't pass anything using the onclick html attribute. I intend to add a lot more questions so i need a way to easily use the check() function for all of them.

<div class="questionCard" id="q1">
                <p>Each problem consists of three statements. Based on the first two statements, the third statement may be true, false, or uncertain.</br></br>
                1.</br>
                Tanya is older than Eric.</br>
                Cliff is older than Tanya.</br>
                Eric is older than Cliff.</br>
                If the first two statements are true, the third statement is</p>
                <input type="radio" name="a1" onclick="check(a1)" value="true"/>True
                <input type="radio" name="a1" onclick="check(a1)" value="false"/>False
                <input type="radio" name="a1" onclick="check(a1)" value="uncertain"/>Uncertain
            </div>
            <div class="questionCard" id="q2">
                <p>
                2.</br>
                Blueberries cost more than strawberries.</br>
                Blueberries cost less than raspberries.</br>
                Raspberries cost more than strawberries and blueberries.</br>
                If the first two statements are true, the third statement is</p>
                <input type="radio" name="a2" value="true"/>True
                <input type="radio" name="a2" value="false"/>False
                <input type="radio" name="a2" value="uncertain"/>Uncertain
            </div>
            <div class="questionCard" id="q3">
                <p>
                3.</br>
                All the trees in the park are flowering trees.</br>
                Some of the trees in the park are dogwoods.</br>
                All dogwoods in the park are flowering trees.</br>
                If the first two statements are true, the third statement is</p>
                <input type="radio" name="a3" value="true"/>True
                <input type="radio" name="a3" value="false"/>False
                <input type="radio" name="a3" value="uncertain"/>Uncertain
            </div>

Here is the Javascrpt.

var score=0;
function check (name) {
    var methods = document.getElementsByName('name');
    for (var i=0; i<methods.length; i++) {
         if (methods[i].checked == true) {
             score +=1;
             alert(score);
            }
   }
}

In your HTML you are trying to pass a variable a1 and not a string "a1" in the check() function you placed in onclick event so you should replace:

onclick="check(a1)"

with:

onclick="check('a1')"

In your javascript you are always looking for elements with name="name" so you should replace:

var methods = document.getElementsByName('name');

with:

var methods = document.getElementsByName(name);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM