<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var mySite={};
mySite.title=$('h1');
mySite.makeRed= function(){
return mySite.title.css('color','red');
};
$(document).ready(function() {
mySite.makeRed();
});
</script>
Good day. Why does the method called inside the function doesn't return anything?
I suppose those script tags are in the HEAD of the document.
When you do this outside the ready handler:
mySite.title=$('h1');
The element h1 does probably not exists yet in the DOM. This is the purpose of the ready handler: make sure the DOM is ready to work with.
You can either move your script tag at the end of the body (right before the </body> tag). This has the same result as the ready handler as the DOM is parsed sequentially.
Or you could grab you H1 element inside the ready handler.
</body> tag)...You have misspelled some things.
var mySite={};
mySite.title=$('<h1/>').html("Hello World"); // Set some text and create the tag tag!
mySite.makeRed= function(){
return mySite.title.css('color','red');
};
$(document).ready(function() {
$("body").append(mySite.makeRed()); // Append it to the dom
});
mySite.title=$('h1');will not select theh1element at this time, because the DOM is not ready. It must be inside a$(document).ready()handler to be able to select that element.