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, Jul 31 '13 at 14:35

score 1 · Answer 1 · answered Aug 01 '13 at 00:18

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 01 '13 at 00:18

Welcome to StackOverflow and don't forget to mark the most helpful answer as *Accepted* :) – thmshd Aug 01 '13 at 09:51

MDEV · Answer 2 · 2013-07-31T14:35:34.127

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 '13 at 14:35

answered Jul 31 '13 at 14:28

MDEV

10,730
2
33
49

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? – Praveen Jul 31 '13 at 14:34
@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 – MDEV Jul 31 '13 at 14:36
Oh, I understood. OP's code will work only with **inline style not in embedded or external styles**. Thanks for sharing it. – Praveen Jul 31 '13 at 14:48

score 0 · Answer 3 · answered Jul 31 '13 at 14:28

0

Try changing the onclick to be this

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

answered Jul 31 '13 at 14:28

Daniel A. White

187,200
47
362
445

score 0 · Answer 4 · edited May 23 '17 at 11:56

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 '17 at 11:56

Community

1
1

answered Jul 31 '13 at 14:29

bfavaretto

71,580
16
111
150

YD1m · Answer 5 · 2013-07-31T14:38:36.087

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 '13 at 14:38

answered Jul 31 '13 at 14:33

YD1m

5,845
2
19
23

May I suggest using `document.currentStyle || window.getComputedStyle()`, because older versions of IE don't support `window.getComputedStyle()` http://stackoverflow.com/questions/2664045/how-to-retrieve-a-styles-value-in-javascript – Jacob Morrison Jul 31 '13 at 15:09

score 0 · Answer 6 · answered Jul 31 '13 at 14:35

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 '13 at 14:35

thmshd

5,729
3
39
67

1

But `jQuery` is not tagged here. Maybe he wants to try using pure JS. – Praveen Jul 31 '13 at 14:46
@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? ;) – thmshd Aug 01 '13 at 09:08

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

6 Answers6