Cannot set property 'innerHTML' of null while still using window.onload to delay

Question

I am trying to write a script that changes the color of the text if it is an active screen (there are probably more efficient ways to do this). The error I am getting is Uncaught TypeError: Cannot set property 'innerHTML' of null My JavaScript (the entire page)

function main() {
    var cardDiv = '<div id ="cardScreen"><a href="cardScreen.html">';
    var card = "Card";
    var closer = "</a></div>";
    var color = (function color1(Check) {
        if (window.location.href.indexOf(Check))
            return "red";
        else
            return "white";
    });
    card.fontcolor = color("cardScreen");
    var cardDivPrint = cardDiv + card + closer;
    window.onload=document.getElementById("header").innerHTML= cardDivPrint;
}
main();

The HTML

<!DOCTYPE html>
<link href="../css/MasterSheet.css" rel="stylesheet" />
<html>
<head>
    <title>
    </title>
</head>
<body>
    <div id="header">
    </div>
    <div>Content goes here.</div>
 <script src="../scripts/essentials.js"></script>
</body>

</html>

The IDE (Visual Studio 2015 Cordova) says that the error is on this line in the JavaScript "var cardDivPrint = cardDiv + card + closer;" I have looked at multiple similar problems and applied what was relevant (also tried changing window.onload to document.onload) but it still throws the same error.

Since you are including the script after the element, finding the element should work, even if some parts of your code are incorrect. — Felix Kling, Jul 10 '15 at 05:46

Tushar · Accepted Answer · 2015-07-10T05:59:30.810

3

onload expects function to be executed after page is completely loaded. Otherwise it'll treat it as simple assignment statement and execute. Use function as follow:

window.onload = function() {
    document.getElementById("header").innerHTML = cardDivPrint;
};

UPDATE

Instead of using main(), use DOMContentLoaded event.

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");

    var cardDiv = '<div id ="cardScreen"><a href="cardScreen.html">';
    var card = "Card";
    var closer = "</a></div>";

    var color = window.location.href.indexOf(Check) !== -1 ? "red" : "white";

    card.fontcolor = color("cardScreen");
    var cardDivPrint = cardDiv + card + closer;
    document.getElementById("header").innerHTML = cardDivPrint;
});

edited Jul 10 '15 at 05:59

answered Jul 10 '15 at 05:38

Tushar

85,780
21
159
179

`var color = (funct…` should probably be reduced to a ternary. – royhowie Jul 10 '15 at 05:54
@royhowie Yes. Reduced – Tushar Jul 10 '15 at 05:57
and if you're into micro-optimizations, you should use `=== -1`. – royhowie Jul 10 '15 at 05:58
@royhowie Can you please explain `micro-optimizations` and it's techniques, if possible or give me links. By the way, Updated – Tushar Jul 10 '15 at 05:58
1

I meant nominally faster to the point that it hardly matters. (although if you want a link, people seem to use `=== -1` more often than `> -1`, e.g., [`Array.prototype.indexOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) on mdn) – royhowie Jul 10 '15 at 06:00

score 0 · Answer 2 · answered Jul 10 '15 at 05:49

Call the main function at the end of your body content

You are getting this error just because the element dose not exists at the time of its selection by JS DOM

<!DOCTYPE html>

<html>
<head>
    <title>
    </title>
<link href="../css/MasterSheet.css" rel="stylesheet" />
<script>
function main() {
    var cardDiv = '<div id ="cardScreen"><a href="cardScreen.html">';
    var card = "Card";
    var closer = "</a></div>";
    var color = (function color1(Check) {
        if (window.location.href.indexOf(Check))
            return "red";
        else
            return "white";
    });
    card.fontcolor = color("cardScreen");
    var cardDivPrint = cardDiv + card + closer;
    window.onload=document.getElementById("header").innerHTML= cardDivPrint;
}
</script>
</head>
<body>
    <div id="header">
    </div>
    <div>Content goes here.</div>
<script>main();</script>
</body>

</html>

Cannot set property 'innerHTML' of null while still using window.onload to delay

2 Answers2

Linked