從單選按鈕檢索值（對於初學者）

所以我試圖做一個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>`

來源

2017-04-17 Madison Renee

爲什麼不使用jQuery庫？如果你想用''讓我們知道 - 我會盡我所能來幫助您 –

可能的重複[如何知道哪個單選按鈕是通過jQuery選擇的？]（http://stackoverflow.com /問題/ 596351 /我怎麼能知道哪個單選按鈕被選中通過jquery） –

現在，這是你的工作代碼（具體說明如下所示）：

<!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），以獲得它們的值與val()方法。

然後，爲了添加它們，我使用了parseInt(variable)，因爲它們被視爲字符串（例如5 + 1 + 3 + 1將是5131而不是10）。 parseInt使它們成爲數字，所以它們現在添加得非常酷。

來源

2017-04-17 17:04:13

謝謝你太多了！你救了我的等級！ –

@Madison Renee我很高興能幫上忙！這裏的社會大部分時間都會幫助你，所以確保你回到我們這裏然後:-)另外，如果我的回答很有幫助，並且我已經深入地解釋了這個問題，以便你瞭解代碼中的錯誤可以選擇它作爲最佳答案，使用此答案留下來回答 - 這將有助於其他用戶通過尋找類似的問題來解決找到正確的答案。祝你今天愉快！ –

@Madison Renee請告訴我你在哪裏改變了什麼，所以我可以看到任何問題，也可以在瀏覽器中使用F12快捷方式並在開發人員Windows控制檯檢查是否有任何相關錯誤。 –

試圖讓每個無線電的值是這樣的：

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

所以，而不是一個ID，你需要指定一個名稱，每個無線電輸入組。

來源

2017-04-17 16:52:43

從單選按鈕檢索值（對於初學者）

回答

相關問題