Javascript can't set innerHTML of button with id because it is "null"
My goal is to create a button where onclick will call a function to change the style of the html tag and the text (or innerHTML) of the button itself. Shouldn't be that hard, right? Well...
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New look for my site!</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="change-template.js"></script>
</head>
<body>
<aside>
<button type="button" id="template-button" onclick="changeTemplate()">Nightmode: On</button>
</aside>
<main>
<h1>New page look for my site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
</html>
CSS (main.css):
html{
background: "#111";
color: "#0F0";
}
JS (change-template.js):
var html = document.getElementsByTagName('html')[0];
var button = document.getElementById('template-button');
var nightmode = true;
function changeTemplate(){
//change to lighter color if black and vice versa
if(nightmode){
html.style.background = "#EEE";
html.style.color = "#000";
button.innerHTML = "Nightmode: OFF";
}else{
html.style.background = "#111";
html.style.color = "#0F0";
button.innerHTML = "Nightmode: ON";
}
nightmode = !nightmode;
}
And I am getting this error
Uncaught TypeError: Cannot set property 'innerHTML' from null at changeTemplate (change-template.js: 10) to HTMLButtonElement.onclick (new-look.html: 11)
So please help me this 90 degrees and I am sitting here on the cusp of hunger, highlighted this simple problem and can hardly think.
source to share
This is because your script is parsed, an event before items are available in DOM
.
When the parser is encountered var button = document.getElementById('template-button');
, the item is not yet available in DOM
.
Which is why your code is technically doing this.
undefined.innerHTML
Move the script tag just above the closing body tag. This will fix the problem as the items are available in DOM
when they are stored in variables.
</main>
<script src="change-template.js"></script>
</body>
if you still want to include your script in the head, the other way around - wrap the code in document.onload
that runs when the DOM is ready.
document.onload = function(e) {
// your code goes here
};
source to share