为什么这个 show/hide 脚本不起作用？

Question

我正在按照在线教程将 javascript 中的 show/hide 函数创建为 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>

Answer 1

据我所知，你只犯了三个错误：

1) getElementByClassName 应该是 getElementsByClassName

2) 没有 .clicked 但 .checked

3) 在你的 <input> 标签上你有 onClick 而它应该是 onclick.

function beginner(){
    var showA = document.getElementById("q1a1");
    var hideA = document.getElementsByClassName("ab");

    for (var i = 0; i != hideA.length; i++){
        if(showA.checked){
            hideA[i].style.display="block";
            }

         else{
             hideA[i].style.display = "none";
             }
        }/**for loop**/
    }/**function**/

.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;
  }

<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" onchange="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" onchange="beginner()">
        <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" onchange="beginner()">
        <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" onchange="beginner()">
        <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>

Answer 2

下面一行检查 getElementsByClassName 方法的拼写

var hideA = document.getElementsByClassName("ab");

也把showA.clicked改成showA.checked

onClick 应该是 onclick

为什么这个 show/hide 脚本不起作用？

Why isn't this show/hide script working?

html

javascript

forms

show-hide