所以我正在尝试进行Buzzfeed样式测验，但是我无法从每个答案选项中检索值并将它们加在一起以获得var'得分'。我的脚本有一堆半功能不起作用。我只是想暴风雨。我应该使用阵列还是输入好吗？我是新手，所以如果你看到一些可笑的错误，请原谅我。谢谢！ ：）
`
<!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>`
答案 0 :(得分：0)
尝试以这种方式获取每个无线电的值：
document.querySelector('input[name="shirt"]:checked').value;
因此，您需要为每组无线电输入指定名称，而不是拥有ID。
答案 1 :(得分：0)
现在这是你的工作代码（解释如下）：
<!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（input:checked，#shirt等）调用了选中的输入字段（#zodiac），以获取{{1的值方法。
然后，为了添加它们，我使用了val()，因为它们被视为字符串（例如5 + 1 + 3 + 1将是5131而不是10）。 parseInt(variable)使他们成为数字，所以他们现在加上非常酷。