CODEWITHSUNDEEP
javascriptcsshtml
user3208943
user3208943

Reputation: 57

After page load, button only works when it is clicked the second time

I'm trying to create buttons (that are divs) that, when clicked, display other divs. For example, Button01 displays Div01 and Button02 displays Div02. Only one Div can be displayed at a time. I have this part working but I've run into an issue where, after the page loads, the click functions don't work until a button div is clicked once (which seems to do nothing). Following this first click, the button divs all work fine. Why is this happening and how can I make it so that the click functions work right away?

HTML

<div id="showOne" class="button" onClick="showOne()">Show One</div>
<div id="showTwo" class="button" onClick="showTwo()">Show Two</div>
<div id="One"></div>
<div id="Two"></div>

CSS

.button {
    width:70px;
    height:81px;
    background-color:#ccc;  
    float:left;
    text-align:center;
}

#One {
    width:70px;
    height:81px;
    background-color:blue;  
    float:left;
    display:none;
}

#Two {
    width:70px;
    height:81px;
    background-color:red;   
    float:left;
    display:none;
}

Javascript

function showOne(){
    if (document.getElementById('Two').style.display != "none") {
        document.getElementById('Two').style.display = "none";
    };

    if (document.getElementById('One').style.display == "none") {
        document.getElementById('One').style.display = "block";
    } else {
        document.getElementById('One').style.display = "none";
    };
};

function showTwo(){
    if (document.getElementById('One').style.display != "none") {
        document.getElementById('One').style.display = "none";
    };

    if (document.getElementById('Two').style.display == "none") {
        document.getElementById('Two').style.display = "block";
    } else {
        document.getElementById('Two').style.display = "none";
    };
};

Demo: http://jsfiddle.net/7BtZn/1/

As you can see, using "No wrap - in ", the buttons only work after a button is clicked once first (which is what is happening on my actual page). Notably, using "onLoad", the buttons don't work at all. What am I doing wrong?

Upvotes: 0

Views: 2871

Answers (3)

MT0
MT0

Reputation: 167962

JSFIDDLE

window.onload = function(){
    var hide = function( el ){ el.style.display = 'none'; },
        show = function( el ){ el.style.display = 'block'; },
        one  = document.getElementById( 'One' ),
        two  = document.getElementById( 'Two' );

    document.getElementById( 'showOne' )
        .onclick = function(){ show( one ); hide( two ); };
    document.getElementById( 'showTwo' )
        .onclick = function(){ show( two ); hide( one ); };
};

Alternatively:

JSFIDDLE

HTML

<div id="showOne" class="square button">Show One</div>
<div id="showTwo" class="square button">Show Two</div>
<div id="One" class="square hidden"></div>
<div id="Two" class="square hidden"></div>

CSS

.button {
    background-color:#ccc;  
    text-align:center;
}

.square {
    width:70px;
    height:81px;
    float: left;
}
#One {
    background-color:blue;  
}
#Two {
    background-color:red;   
}

.hidden {
    display:none;
}

JavaScript

window.onload = function(){
    var hide = function( el ){ el.className += ' hidden'; },
        show = function( el ){ el.className = el.className.replace( /\s*\bhidden\b/g, '' ); },
        one  = document.getElementById( 'One' ),
        two  = document.getElementById( 'Two' );

    document.getElementById( 'showOne' )
        .onclick = function(){ show( one ); hide( two ); };
    document.getElementById( 'showTwo' )
        .onclick = function(){ show( two ); hide( one ); };
};

Upvotes: 0

cookie monster
cookie monster

Reputation: 10972

This is because the .style.display only gives you the setting if it is currently set directly on the element. It won't give you a result from your style sheet.

To fix it, make the comparison to the default (style sheet) value a comparison to "" instead of to "none", then set it to "" instead of "none" to return to the default.

DEMO: http://jsfiddle.net/7BtZn/5/

function showOne(){
    var one = document.getElementById('One');
    var two = document.getElementById('Two');

    if (two.style.display != "") {
        two.style.display = "";
    }

    if (one.style.display == "") {
        one.style.display = "block";
    } else {
        one.style.display = "";
    }
}

function showTwo(){
    var one = document.getElementById('One');
    var two = document.getElementById('Two');

    if (one.style.display != "") {
        one.style.display = "";
    }

    if (two.style.display == "") {
        two.style.display = "block";
    } else {
        two.style.display = "";
    }
}

I also reduced the code by saving the elements to variables. Much cleaner and less error prone that way.

I removed a bunch of unnecessary semicolons too.

Here's an even more DRY version of your code:

DEMO: http://jsfiddle.net/7BtZn/6/

function swapShow(el1, el2) {
    if (el1.style.display != "") {
        el1.style.display = "";
    }

    if (el2.style.display == "") {
        el2.style.display = "block";
    } else {
        el2.style.display = "";
    }
}

function showOne(){
    swapShow(document.getElementById('Two'),
             document.getElementById('One'));
}

function showTwo(){
    swapShow(document.getElementById('One'),
             document.getElementById('Two'));
}

Upvotes: 1

Todd Motto
Todd Motto

Reputation: 913

This is because the style Object doesn't have a value. Change your code to this:

<div id="One" style="display: none;"></div>
<div id="Two" style="display: none;"></div>

Or display: block; should you need that instead.

Ideally you should avoid inline onclick event handlers and toggle classes using JavaScript rather than abusing the style object - which is in no way scalable.

Upvotes: 0

Related Questions