【发布时间】：2015-08-20 19:03:18
【问题描述】：
我正在关注一个在线教程，用于在 javascript 中创建一个显示/隐藏函数到一个 html5 表单，并且从我可以看到的一切都是正确的。 Dreamweaver 没有显示任何语法错误，所以我真的不明白为什么它不起作用。
这里是 JavaScript
function beginner(){
var showA = document.getElementById("q1a1");
var hideA = document.getElementByClassName("ab");
for (var i = 0; i != hideA.length; i++){
if(showA.clicked){
hideA[i].style.display="block";
}
else{
hideA[i].style.display = "none";
}
}/**for loop**/
}/**function**/
这是 CSS
.qbox1{
background-color:#0F9;
width:600px;
height:auto;
margin:auto;
}
.ab{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.cd{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.ques1{
background-color:#09F;
width:600px;
height:auto;
text-align:center;
}
.anscont{
background-color:#390;
width:500px;
height:40px;
margin:auto;
}
.left-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:left;
position:relative;
top:10px;
left:10px;
}
.right-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:right;
position:relative;
bottom:30px;
right: 10px;
}
.radcont{
width:340px;
height:40px;
background-color:#096;
margin:auto;
}
.radbox{
width:10%;
height:40px;
float:left;
margin:auto;
background-color:#CC9;
}
.radbox label{
text-align:center;
display:block;
}
.radbox input{
margin:auto;
width: 90%;
display:block;
这是html
<form>
<div class="qbox1">
<div class="ques1">
Where are you in terms of operating your Business?
</div>
<input type="radio" name="ques01" value="I just started planning everything" id="q1a1" onClick="beginner()">
<label for="q1a1">I just started planning everything.</label><br />
<input type="radio" name="ques01" value="I’ve been planning for a while and am working on getting it started once and for all." id="q1a2">
<label for="q1a2">I’ve been planning for a while and am working on getting it started once and for all.</label><br />
<input type="radio" name="ques01" value="I’m about to open soon." id="q1a3">
<label for="q1a3">I’m about to open soon.</label><br />
<input type="radio" name="ques01" value="I’m already open for Business." id="q1a4">
<label for="q1a4">I’m about to open soon.</label><br />
</div><br />
<div class="ab">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--ab--><br />
<div class="cd">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--cd--><br />
</form>
【问题讨论】：
-
这对 Stackoverflow 来说是一个非常糟糕的问题。您需要提出更具体的问题，而不仅仅是转储您的代码并要求人们为您调试它。你甚至检查过浏览器的控制台是否有错误？
getElementByClassName有错字。应该是getElementsByClassName。 -
好吧，有时人们对自己在做什么还不够了解，无法提出比这更受过教育的问题，所以我很抱歉无法更具体，但感谢您的指点排除错字。
-
@Typo 这 is 是个坏问题。这完全是题外话——“为什么这段代码不起作用？” OP 应该阅读help center 以了解如何提出适当的、与主题相关的问题。
-
对于调试此问题的任何帮助，我们需要您收到的错误，或实际行为与预期行为之间的差异。
-
@royhowie 很高兴你这样做了
标签： javascript html forms show-hide