CODEWITHSUNDEEP
javascripthtml
user2638464
user2638464

Reputation:

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

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

Upvotes: 0

Views: 370

Answers (6)

user2638464
user2638464

Reputation:

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

Upvotes: 1

YD1m
YD1m

Reputation: 5895

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

Upvotes: 0

MDEV
MDEV

Reputation: 10838

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

Upvotes: 0

thmshd
thmshd

Reputation: 5847

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.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71908

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.

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190907

Try changing the onclick to be this

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

Upvotes: 0

Related Questions