为什么这个显示/隐藏脚本不起作用？

时间：2015-08-20 19:03:19

标签： javascript html5 forms show-hide

我按照在线教程创建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>

2 个答案:

答案 0 :(得分：2)

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

1）getElementByClassName应为getElementsByClassName

2）没有.clicked但.checked

3）在<input>标记上，onClick标记为onclick。

＆＃13;
＆＃13; 
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**/
＆＃13; 
.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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

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

var hideA = document.getElementsByClassName（“ab”）;

同时将showA.clicked更改为 showA.checked

onClick应为 onclick

相关问题
最新问题