I am suppose to use a function expression to display the date when the page loads then use a self invoking function to change the date font color.
I thought I was on the right path but I have two issues. The first one is, my code doesnt change the color of text. the second one, is i get a console error from the first function saying the dateDisplay(); is not defined. but if I try to remove the function name from the call and just use (); to run the function. I get the error
document.getElementById("dateDisplay").innerHTML = d; is null
I had tried to change several things and I just wind up with console errors. generally i either get function not defined, or an error like the one above.
HTML
<div>
<h2><p id="dateDisplay"></p></h2>
<p>does this work</p>
</div>
javascript
var d = new Date();
window.onload = function dateDisplay(){
document.getElementById("dateDisplay").innerHTML = d;
}
();
(function (){
document.getElementById("dateDisplay").style.color="red";
})();
Im quite lost and dont understand whats going on.
2 Answers 2
Do this instead:
window.onload = function(){
var d = new Date();
document.getElementById("dateDisplay").innerHTML = d;
document.getElementById("dateDisplay").style.color = "red";
};
or even better:
window.addEventListener("load", function(){
var d = new Date();
document.getElementById("dateDisplay").innerHTML = d;
document.getElementById("dateDisplay").style.color = "red";
});
or you can also do:
document.addEventListener("DOMContentLoaded", function(){
var d = new Date(),
display = document.getElementById("dateDisplay");
display.innerHTML = d;
display.style.color = "red";
});
4 Comments
Are you doing homework that requires you to do it a certain way?
Anyway I thought I'd give a couple pointers to help out. First off, if something doesn't work and I don't understand it much (still learning it) I like to break it down to smaller parts and test until I get a better understanding.
For instance try just one of your functions with console.log until you get it working:
var d = new Date();
window.onload = function() {
console.log('window loaded!');
}
This function should work just fine when you load, if it does not then something else is wrong. Once you get this working then add in the document.getElem... and work on the next function etc.
edit, showing my quick test:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header"></div>
</body>
<script src="test.js"></script>
</html>
javascript:
var d = new Date();
window.onload = function() {
console.log('window loaded');
document.getElementById('header').innerHTML = d;
}
(function() {
console.log('invoked');
document.getElementById('header').style.color = 'red';
}());
worked just fine.
();on the 5th line of your JavaScript. Also, if your script block is above the div where thedateDisplayelement is defined, then the element will not exist at the time that the self-invoking function expression is executed.