从单选按钮中检索值（适合初学者）

Question

所以我想做一个 Buzzfeed 风格的测验，但我无法从每个答案选择中检索值并将它们加在一起作为 var 'score'。我的脚本有一堆不起作用的半函数。我只是想集思广益。我应该使用数组还是输入可以？我对此很陌生，所以如果您看到一些可笑的错误，请原谅我。谢谢！ :)

`

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="stylesheet" >

<script>    

    var score = 0; 
    var a1, a2, a3, a4; 

function next(){

    a1 = document.getElementById("shirt").value;
    a2 = document.getElementById("zodiac").value;
    a3 = document.getElementById("saturday").value;
    a4 = document.getElementById("hunger").value;

    score = a1+a2+a3+a4;  

  if(score<=3) {

    return("You should eat a banana.")
} 
}    

function alertFunction(){
        alert(score);
    }

function checkRadio(){
   if(document.getElementById('name')=="shirt") {

   }
}    

  console.log(score); 

</script>

<style>

    div {
        border: 1px solid black;
        background-color: #def2ed;
        padding: 20px;    
        margin-left: auto;
    }
</style>
</head> 
<body> 

    <form class = "quiz">


<div id="shirt">

    <h2>Question #1: What color shirt are you currently wearing? </h2>

        <input onlick="checkRadio(this.value, this.name)" id="sh1" type="radio" name="shirt" value="1"> White<br>
        <input onlick="checkRadio(this.value, this.name)" id="sh2" type="radio" name="shirt" value="0"> Yellow<br>
        <input onlick="checkRadio(this.value, this.name)" id="sh3" type="radio" name="shirt" value="3"> Red<br>
        <input onlick="checkRadio(this.value, this.name)" id="sh4" type="radio" name="shirt" value="5"> Other<br>

</div> 


<div id="zodiac">

    <h2>Question #2: What is your Zodiac sign? </h2>

        <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="1"> Scorpio<br>
        <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="0"> Capricorn<br>
        <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="3"> Gemini<br>
        <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="1"> Pisces<br>

</div> 

<div id="saturday">

    <h2>Question #3: What do you see yourself doing on a Saturday? </h2>

        <input onlick="checkRadio(this.value, this.name)" id="s1" type="radio" name="saturday" value="3"> Sleeping until noon<br>
        <input onlick="checkRadio(this.value, this.name)" id="s2" type="radio" name="saturday" value="1"> Hitting the gym<br>
        <input onlick="checkRadio(this.value, this.name)" id="s3" type="radio" name="saturday" value="5"> Shopping <br>
        <input onlick="checkRadio(this.value, this.name)" id="s4" type="radio" name="saturday" value="1"> Hanging out with friends<br>

</div> 

 <div id="hunger">

    <h2>Question #4: How hungry are you? </h2>

        <input onlick="checkRadio(this.value, this.name)" id="h1" type="radio" name="hunger" value="0"> Not really hungry at the moment<br>
        <input onlick="checkRadio(this.value, this.name)" id="h2" type="radio" name="hunger" value="1"> I'm a little peckish<br>
        <input onlick="checkRadio(this.value, this.name)" id="h3" type="radio" name="hunger" value="0"> I'm pretty hungry, now that you mention it<br>
        <input onlick="checkRadio(this.value, this.name)" id="h4" type="radio" name="hunger" value="1"> I'm STARVING!<br>
</div>     


   <button type="button" class="primaryBtn" onClick="alert(score)">Next</button>

</form>  

</body>

</html>`

Answer 1

尝试以这种方式获取每个无线电的值：

document.querySelector('input[name="shirt"]:checked').value;

因此，您需要为每组无线电输入指定一个名称，而不是拥有 ID。

Answer 2

现在这是适合您的工作代码（解释见下文）：

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="stylesheet" >
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>    

    var score = 0; 
    var a1, a2, a3, a4; 

function count(){

    a1 = $("#shirt input:checked").val();
    a2 = $("#zodiac input:checked").val();
    a3 = $("#saturday input:checked").val();
    a4 = $("#hunger input:checked").val();

    var score = parseInt(a1) + parseInt(a2) + parseInt(a3) + parseInt(a4);  
    alert(score);
  if(score<=3) {

    return("You should eat a banana.")

} 
};    


</script>

<style>

    div {
        border: 1px solid black;
        background-color: #def2ed;
        padding: 20px;    
        margin-left: auto;
    }
</style>
</head> 
<body> 

    <form class = "quiz">


<div id="shirt">

    <h2>Question #1: What color shirt are you currently wearing? </h2>

        <input onlick="checkRadio(this.value, this.name)" id="sh1" type="radio" name="shirt" value="1"> White<br>
        <input onlick="checkRadio(this.value, this.name)" id="sh2" type="radio" name="shirt" value="0"> Yellow<br>
        <input onlick="checkRadio(this.value, this.name)" id="sh3" type="radio" name="shirt" value="3"> Red<br>
        <input onlick="checkRadio(this.value, this.name)" id="sh4" type="radio" name="shirt" value="5"> Other<br>

</div> 


<div id="zodiac">

    <h2>Question #2: What is your Zodiac sign? </h2>

        <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="1"> Scorpio<br>
        <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="0"> Capricorn<br>
        <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="3"> Gemini<br>
        <input onlick="checkRadio(this.value, this.name)" id="z1" type="radio" name="zodiac" value="1"> Pisces<br>

</div> 

<div id="saturday">

    <h2>Question #3: What do you see yourself doing on a Saturday? </h2>

        <input onlick="checkRadio(this.value, this.name)" id="s1" type="radio" name="saturday" value="3"> Sleeping until noon<br>
        <input onlick="checkRadio(this.value, this.name)" id="s2" type="radio" name="saturday" value="1"> Hitting the gym<br>
        <input onlick="checkRadio(this.value, this.name)" id="s3" type="radio" name="saturday" value="5"> Shopping <br>
        <input onlick="checkRadio(this.value, this.name)" id="s4" type="radio" name="saturday" value="1"> Hanging out with friends<br>

</div> 

 <div id="hunger">

    <h2>Question #4: How hungry are you? </h2>

        <input onlick="checkRadio(this.value, this.name)" id="h1" type="radio" name="hunger" value="0"> Not really hungry at the moment<br>
        <input onlick="checkRadio(this.value, this.name)" id="h2" type="radio" name="hunger" value="1"> I'm a little peckish<br>
        <input onlick="checkRadio(this.value, this.name)" id="h3" type="radio" name="hunger" value="0"> I'm pretty hungry, now that you mention it<br>
        <input onlick="checkRadio(this.value, this.name)" id="h4" type="radio" name="hunger" value="1"> I'm STARVING!<br>
</div>     


   <button type="button" class="primaryBtn" onClick="count();">Next</button>

</form>  

</body>

</html>

首先，我链接了 jquery 以启用 jQuery 选择器，我认为这对于初学者来说更容易学习。语法是 $('SELECTOR_NAME').method(); 我只是为每个 div（#shirt、#zodiac 等）调用了选中的输入字段（input:checked）以使用 [=15 获取它们的值=]方法。

然后，为了添加它们，我使用了 parseInt(variable)，因为它们被视为字符串（例如 5 + 1+ 3+ 1 将是 5131 而不是 10）。 parseInt 让他们成为数字，所以他们现在加起来真的很酷。

从单选按钮中检索值（适合初学者）

Retrieving value from radio buttons (for beginner)

javascript

radiobuttonlist