0

I'm following a tutorial online for creating a show/hide function in javascript to an html5 form and from what I can see everything is spot on. Dreamweaver isn't showing any syntax errors so I really don't understand why it's not working.

Here's the 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**/

here's the 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;

Here's the 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>
royhowie
  • 11,075
  • 14
  • 50
  • 67
Optiq
  • 2,835
  • 4
  • 33
  • 68
  • 2
    This is a really bad question for Stackoverflow. You need to ask more specific questions and not just dump your code and ask people to debug it for you. Did you even check your browser's console for errors? `getElementByClassName` has a typo. It should be `getElementsByClassName`. – Felipe Brahm Aug 20 '15 at 19:12
  • well sometimes people don't know enough about what they're doing to be able to ask a more educated question than that, so I apologize for not being capable of being more specific, but thanks for pointing out the typo. – Optiq Aug 20 '15 at 19:18
  • @DaMightyOptiq this is not a bad question, it would be bad if you didn't show any effort. Asking about whats wrong with your code it's perfectly valid. – Typo Aug 20 '15 at 19:21
  • You should also follow a more conventional JS style guide: https://github.com/airbnb/javascript – royhowie Aug 20 '15 at 19:22
  • 2
    @Typo this *is* a bad question. It is completely off topic—"why isn't this code working?" OP should read the [help center](http://stackoverflow.com/help) to learn how to ask a proper, on-topic question. – royhowie Aug 20 '15 at 19:23
  • @royhowie no it's not. Flag it then, ask for it to be closed. – Typo Aug 20 '15 at 19:24
  • @DaMightyOptiq sorry bit late in answering .. here is the working fiddle might help thats the reason posting this as comment not as answer [link](http://jsfiddle.net/Kri4shna/jt1hjvsf/) – Krsna Kishore Aug 20 '15 at 19:26
  • 1
    To of any help debugging this, we need the error you're receiving, or the difference between actual and expected behavior. – ssube Aug 20 '15 at 19:26
  • @Typo I have voted to close and am not the only one who has. – royhowie Aug 20 '15 at 19:27
  • 1
    @royhowie I'm glad you did – Typo Aug 20 '15 at 19:27

2 Answers2

2

As far as I could tell, you only had three mistakes:

1) getElementByClassName should be getElementsByClassName

2) There's no .clicked but .checked

3) On your <input> tag you have onClick when it should be 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>
MinusFour
  • 13,913
  • 3
  • 30
  • 39
  • 1
    it could also be the onClick call instead of onclick, here's a question related: http://stackoverflow.com/questions/4380719/onclick-or-onclick – Typo Aug 20 '15 at 19:16
  • I didn't even see the onClick on the HTML, I assumed the listener logic was somewhere else. – MinusFour Aug 20 '15 at 19:18
  • Thanks for your help everyone, I got it to work, but now the else clause doesn't seem to be working but I'll post another question for that and try to ask it in a "better" way than this to avoid being ripped apart lol. – Optiq Aug 20 '15 at 19:40
  • It's just about using another listener for that. If you do `onchange` it should work. I'll update the answer. – MinusFour Aug 20 '15 at 19:46
  • Well, you'll have to bind `onchange` on all of the radio buttons so it seem... – MinusFour Aug 20 '15 at 19:58
-1

Below line check the spelling of getElementsByClassName method

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

Also change showA.clicked into showA.checked

onClick should be onclick

Girish Jha
  • 132
  • 5