如何在输入名称中添加其他名称？
var checked = document.querySelector("input[name = 'variable']:checked")
我有另一个名为'sub'的输入名称。但我不知道如何在代码中添加它。
（我在js的学习过程中）
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"> <h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo" style="color:red"></span></div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy <span class="explanation" id="demo2" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3" style="color:green"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="demo4"></span> </div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
和脚本：
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelector("input[name=variable]:checked, input[name=sub]:checked")
var value = checked.parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
case 'demo4':
answer = "hjhjhjhjct";
break;
}
checked.parentNode.lastChild.innerHTML = answer;
}
答案 0 :(得分：2)
有一些要提及的要点：
首先。
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo" style="color:red"></span></div>
<div> </div> <-- this is will become your .lastChild so i think you not expect this <div> as .lastChild so delete that tag.
第二次使用querySelectorAll进行多项选择，所以这是错误的：
var checked = document.querySelector("input[name=variable]:checked, input[name=sub]:checked")
第三次多次选择返回多个结果，即结果数组，所以使用数组进行结果处理。
以下是已编辑的代码，因此请将其重新编辑：
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
border-width: 5px;
border-color: #00A7AE;
margin-top: 7%;
text-align: center;
position: relative;
background: #73B7DB;
}
.row {
text-align: left;
color: white;
margin-left: 10%;
}
span#demo, #demo2, #demo3, #demo4, #demo5, #demo6, #demo7, #demo8, #demo9 {
display: inline;
margin-right: 30%;
float:right;
width:50%;
}
input[type="submit"]
{
padding: 10px 15px 11px !important;
font-size: 18px !important;
background-color: #57d6c7;
font-weight: bold;
text-shadow: 1px 1px #57D6C7;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"><h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />
Octagon <span class="explanation" id="demo1" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="0" />
Leprosy <span class="explanation" id="demo2" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3" style="color:green"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="demo4"></span></div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2 <span class="explanation" id="demo5"></span></div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3 <span class="explanation" id="demo6"></span></div>
<div class="row"><h3>Question 3</h3></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1 <span class="explanation" id="demo7"></span></div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2 <span class="explanation" id="demo8"></span></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3 <span class="explanation" id="demo9"></span></div>
<p> <input type="submit" onclick="myFunction()" value="Check" /> </p>
</form>
</div>
<!-- close quizbox div -->
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelectorAll("input[name=variable]:checked, input[name=sub]:checked, input[name=con]:checked")
for(var answ = 0 ; answ < checked.length; answ++){
var value = checked[answ].parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
case 'demo4':
answer = "demo4";
break;
case 'demo5':
answer = "demo5";
break;
case 'demo6':
answer = "demo6";
break;
case 'demo7':
answer = "demo7";
break;
case 'demo8':
answer = "demo8";
break;
case 'demo9':
answer = "demo9";
break;
}
checked[answ].parentNode.lastChild.innerHTML = answer;
}
}
</script>
<div> </div>