Toggle function not working when called

Question

The idea is to make two div appear or disappear based on the click. The CSS display style is set to none. Any help is appreciated.

   <div id="mainOval">
        <form id="btns">
            <input type="button" value="Timer" id="timerBtn" onclick="displayCont('Timer')"/>
            <input type="button" value="Countdown" id="ctDownBtn" onclick="displayCont('Countdown')"/>
        </form> 
</div>
<div id="Timer">
</div>
<div id="Countdown"> 
</div> 



<script type="text/javascript">
    function displayCont(inp)
        {
            var ele = document.getElementById(inp);
            var shown = ele.style.display;
            if (shown == 'none') 
                {
                    ele.style.display = 'block';
                }
            else if (shown == 'block')
                {
                    ele.style.display = 'none';
                }
        }
</script>

You are never changing of the attributes of the element, simply setting the value for shown. You need to actually change the display css value for something to happen. — thatidiotguy
– thatidiotguy, Commented Feb 6, 2014 at 21:33
Does your code really have spaces between the equals signs in your if() statements? — Ken Herbert
– Ken Herbert, Commented Feb 6, 2014 at 21:35

akaRem · Accepted Answer · 2014-02-06 21:45:05Z

1

The correct code is:

if (shown == 'none') {
    ele.style.display = 'block';
}
else if (shown == 'block'){
    ele.style.display = 'none';
}

You have ot set the style of the element, not just assign a Javascript variable. And equality is ==, not = =.

edited Feb 6, 2014 at 21:45

akaRem

7,6884 gold badges31 silver badges44 bronze badges

answered Feb 6, 2014 at 21:36

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barmar Over a year ago

You don't have a style attribute in your elements. ele.style.display doesn't get the computed style from CSS, it just gets whatever is in the style="XXX" attribute.

Collectives™ on Stack Overflow

Toggle function not working when called

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related