Trying to find error in JS code - Changing CSS with Javascript

Question

I am writing a simple function to toggle a menu for a mobile site but cannot get my code to work. I have looked at examples online and have followed them but I can't achieve to toggle the menu off.

<script type="text/javascript">
function toggleMen(id) {    
     var a = document.getElementById(id);
    if(a.style.display='none'){
        a.style.display='block';
    }
    else if (a.style.display='block'){      
        a.style.display="none";
    }
}
</script>

As you can see I am trying to simply check what value display is at and set it accordingly. I know there may be more efficient ways but for now this is all I need.

Method Call:

toggleMen('menu');

Community · Accepted Answer · 2017-05-23 12:30:12Z

1

The = operator is for assigning values.

The === (or == if you're feeling lucky) operator is for comparing values.

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

See here for more information on the difference between === and ==.

BTW Here's a working fiddle. After tinkering a bit, I realized your problem may have been that the original display wasn't set to anything (a.display.style was equal to ''), so your conditional was never firing on either condition. If that is the case, with the above changes, it will now fire the else on the first pass, and then alternate every pass after that. (And if that isn't the case, the above changes should still do the trick)

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jul 24, 2015 at 4:27

sfletche

50.1k32 gold badges110 silver badges120 bronze badges

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

Comments

Thi Tran · Accepted Answer · 2015-07-24 04:26:08Z

0

try a.style.display == 'none' instead of a.style.display = 'none'

answered Jul 24, 2015 at 4:26

Thi Tran

7015 silver badges11 bronze badges

1 Comment

Anon Omus Over a year ago

I have tried before but I just tried again to no avail.

Ole Sauffaus · Accepted Answer · 2015-07-24 04:43:09Z

0

Try this HTML:

<button onclick="toggleMen('menu');">Button</button>

<div id="menu">
    <div id="gripMenu">
    <div class="menuItem">Home</div>
    <div class="menuItem">Cake Builder</div>
    <div class="menuItem">Order</div>
    <div class="menuItem">Cakes</div>
    <div class="menuItem">Info</div>
    <div class="menuItem">About</div>
</div>

... And this JS:

function toggleMen(id){
    var a = document.getElementById(id);

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

edited Jul 24, 2015 at 4:43

answered Jul 24, 2015 at 4:28

Ole Sauffaus

5343 silver badges13 bronze badges

3 Comments

Anon Omus Over a year ago

Not working, although looks correct. This is a real head scratcher

Anon Omus Over a year ago

Its not a wrong ID. It does change to block. I just cant change back to "none"

Ole Sauffaus Over a year ago

Remove ALL your css ... and test ... it works without your CSS!

Collectives™ on Stack Overflow

Trying to find error in JS code - Changing CSS with Javascript

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related