Using Functions to Select HTML Elements


#1

In this lesson I had no issue with getting it working, but what I don't understand is why the square was not there in the first place? I did not see any code that made it not appear when the page loads so why was it not there? Was this programmed this way in the lesson to make it easier for the person learning?

HTML

<!DOCTYPE html>
<html>
    <head>
		<title>Fade In!</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
	</head>
	<body>
        <div></div>   
	</body>
</html>

CSS

div {
    height: 100px;
    width: 100px;
    background-color: #F38630;
    display: none;
    border-radius: 5px;
}

Script.js

$(document).ready(function(){
    $("div").fadeIn("slow");

});

To me, before I put in this script code the square should had been visible no?


#2

We can test your hypothesis by commenting out the code:

// $("div").fadeIn("slow");

Now run. Still not there? Then it is in the CSS. Wait! Sure enough,

 display: none;

That will do it. Change to block or remove the declaration completely. Now Run. It should be there. Now uncomment your code above and Run. Is this what you expected?