CODEWITHSUNDEEP
javascripttoggle
Amauri
Amauri

Reputation: 550

Toggle function not working when called

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>

Upvotes: 0

Views: 32

Answers (1)

Barmar
Barmar

Reputation: 782653

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 = =.

Upvotes: 1

Related Questions