My JavaScript if...else statement isn't working properly

Question

So I'm fairly new to javascript, and I'm trying to use a simple if...else statement to toggle between showing and hiding a div element. My HTML page looks like this:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
#fluffy {
            height:200px;
            width:200px;
            background-color:yellow;
            display:block;
}
#pepper {
            height:200px;
            width:200px;
            background-color:green;
            display:block;
}
</style>
</head>

<body>
<div id="fluffy"></div>
<div id="pepper" onclick="changeState()"></div>
<script type="text/javascript">
function changeState() {
var divState = document.getElementById('fluffy').style.display;
if (document.getElementById('fluffy').style.display == 'block') {
    document.getElementById('fluffy').style.display = 'none';
}
else if (document.getElementById('fluffy').style.display == 'none') {
    document.getElementById('fluffy').style.display = 'block';
} else {
    alert('test error message');
}
}
</script>
</body>

</html>

When I load the page in my browser, I receive an alert box containing 'test error message'. My original code had document.getElementById('fluffy').style.display stored in a variable called divState, but this didn't even give me an alert box, it didn't do anything. I get the feeling I'm using == wrong or something, but I'm really not sure. I've used ===, and when that didn't work I switched to ==, which is in the code above.

If anyone knows what exactly I'm doing wrong, I would appreciate the help.

Thanks, Harold

Do you use Firebug? It is an useable plugin for your browser, which shows you a bug fast always. You can browse all properties or check if some method exists etc. == is the right way to compare strings, I mean. I have similar troubles with storing objects to variables in Javascript. Sometimes, it is the best way dont use it. — Petr Dušek
– Petr Dušek, Commented Jul 31, 2013 at 14:35

user2638464 · Accepted Answer · 2013-08-01 00:18:23Z

1

Alright, it looks like you guys fixed my problems. I can't thank you enough, and I will definitely look into jQuery!

answered Aug 1, 2013 at 0:18

user2638464

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

1 Comment

thmshd Over a year ago

Welcome to StackOverflow and don't forget to mark the most helpful answer as Accepted :)

Daniel A. White · Accepted Answer · 2013-07-31 14:28:57Z

0

Try changing the onclick to be this

<div id="pepper" onclick="changeState"></div>

answered Jul 31, 2013 at 14:28

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:56:36Z

0

document.getElementById('fluffy').style.display is ''. Since you're setting styles with a stylesheet, you'll have to use getComputedStyle (plus friends for cross-browser compatibility). You can find an example cross-browser implementation in the answer to Get all computed style of an element.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jul 31, 2013 at 14:29

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Comments

thmshd · Accepted Answer · 2013-07-31 14:35:24Z

0

I know, you're trying to learn JavaScript what I also want to encourage, but with jQuery, this whole stuff would be a one-liner plus crossbrowser-friendly etc.

<div id="fluffy"></div>
<div id="pepper"></div>

The <script> contains just:

$("#pepper").click(function () { $("#fluffy").toggle(); });

Try it out at JSFiddle.

answered Jul 31, 2013 at 14:35

thmshd

5,8683 gold badges41 silver badges70 bronze badges

2 Comments

Praveen Over a year ago

But jQuery is not tagged here. Maybe he wants to try using pure JS.

thmshd Over a year ago

@user1671639 sure, but well what's wrong with showing people some alternative solutions, especially if it looks that they attempt to reinvent the square wheel? ;)

MDEV · Accepted Answer · 2013-07-31 14:35:34Z

0

When the page first loads, the div doesn't have any inline styles. element.style reads inline styles only.

You will need to render the div with style="display:block;" or if you can't/don't want to do that, look into getComputedStyle options for your supported browsers

edited Jul 31, 2013 at 14:35

answered Jul 31, 2013 at 14:28

MDEV

10.9k2 gold badges35 silver badges50 bronze badges

3 Comments

Praveen Over a year ago

But document.getElementById('fluffy').style.display; will return the respective right. So he can have it var divState = document.getElementById('fluffy').style.display; if ( divState == 'block') { This should work right?

MDEV Over a year ago

@user1671639 No, as i said above, .style only uses inline styles that is the style="" attribute on the element. The OP can only use this method if display:block; is explicitly set on the element before this JS runs

Praveen Over a year ago

Oh, I understood. OP's code will work only with inline style not in embedded or external styles. Thanks for sharing it.

YD1m · Accepted Answer · 2013-07-31 14:38:36Z

0

Use computed style:

<div id="fluffy"></div>
<div id="pepper" onclick="changeState()"></div>
<script type="text/javascript">
function changeState() {
    var fluffy = document.getElementById('fluffy');
    var divState = window.getComputedStyle(fluffy).display;

    if (divState == 'block') {
       fluffy.style.display = 'none';
    }
    else if (divState == 'none') {
       fluffy.style.display = 'block';
    } else {
       alert('test error message');
    }
}
</script>

jsFiddle

edited Jul 31, 2013 at 14:38

answered Jul 31, 2013 at 14:33

YD1m

5,9152 gold badges22 silver badges25 bronze badges

1 Comment

Jacob Morrison Over a year ago

May I suggest using document.currentStyle || window.getComputedStyle(), because older versions of IE don't support window.getComputedStyle() stackoverflow.com/questions/2664045/…

Collectives™ on Stack Overflow

My JavaScript if...else statement isn't working properly

6 Answers 6

1 Comment

Comments

Comments

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related