CODEWITHSUNDEEP
javascriptcssif-statement
Kevin Steve Maningo
Kevin Steve Maningo

Reputation: 254

JavaScript If Else Statement on css height

Here is my code

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.2.min.js"></script>
<style>
div{
border:2px solid black;
width:200px;
min-height:300px;
}
</style>
</head>
<body>
<div>
    <p id="demo">This will change</p>
    <input type="button" value="OK" onclick="myFunction()"/>
</div>
<script>
$(document).ready(function()
{
    $("input").click(function()
    {
        if($("div").height("300px") === true){
            document.getElementById("demo").innerHTML="HELLO WORLD!";
        }
    });
});
</script>
</body>
</html>

I want to do is like this, If div height is equal to 300px the "This will change" paragraph will change to Hello World on the click of a button. Sorry this is my first time on javascript

Upvotes: 1

Views: 3810

Answers (2)

AceCorban
AceCorban

Reputation: 2103

I'm noticing a couple things right off the bat. First, the .height function returns the numeric value without "px". Second, you are placing a value inside the .height function,meaning you are setting its value to "300px". Lastly, you are using the === operator which only returns true if the type and value are the same. Instead, try this: 

if($("div").height() == 300)

On another note, you'll eventually want to give your input and div ids and access them through those ids, just in case your markup has more than one of each later on.

Upvotes: 1

jackwanders
jackwanders

Reputation: 16040

$("div").height("300px") sets the height of the div, it does not return true if the height equals 300px.

You want $('div').height() === 300

http://api.jquery.com/height/

Upvotes: 8

Related Questions