CODEWITHSUNDEEP
javascript
kronis72
kronis72

Reputation: 311

self-invoking function issue javascript

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.

Upvotes: 0

Views: 578

Answers (2)

Tj Gienger
Tj Gienger

Reputation: 1405

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.

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94299

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";
});

Upvotes: 2

Related Questions