Hello everyone and happy holidays. I hope your all staying warm and safe. Im here because I am having a little bit of an issue with some code. I'm not new to programming but am fairly new to JavaScript. I have searched for this questions answer and have found it on this site, but I seem to be having an issue anyway even after implementing the agreed upon solution. The TypeError being thrown points to the line where the 'var sections' variable is first used. That line simply appends the h1 element to the current div with 'class="section"'in the NodeList. The TypeError data says 'cannot read property appendChild of null' which means I don't have a proper reference to a node of type Element which I would need in order to use appendChild() or the style object. I'm just trying to figure out whats wrong with this but simply am at a loss. The answer I got on another thread here as to how you properly get a reference of the elements using getElementsByClassName() said that you simply use the 'item()' method of the NodeList object like so:
var sections = document.getElementsByClassName('section');
var section_header = document.createElement('h1');
sections.item(0).appendChild(section_header);
vs. what I was originally using...
var sections = document.getElementsByClassName('section');
var section_header = document.createElement('h1');
sections[0].appendChild(section_header);
... after I made the switch to the 'NodeList.item()' method I started getting the TypeError. The image attached is a screenshot of chrome dev tools, an instance of sublime and the page you can see open in the text editor is what you see open in chrome(a blank page with dark background). I'm only doing this to learn so its not for a project or anything. its just scratch pad code. I hope this post complies with the forums policies as I know an agreed upon answer is available but as you can see something is still wrong. Thank you everyone for your time and advice in advance it's greatly appreciated.
Here's the test code I am actually working with which is seen in the screenshot open in sublime. Just to throw out there, I did try moving the script tag itself around(e.g. in the head, under the body opening & above the body closing tag but still the error persisted:
<html>
<head>
...
</head>
<body>
<div id="page-wrapper">
<div class="section">
</div>
<div class="section">
</div>
<div class="section">
</div>
</div>
<script type="text/javascript">
// Colors to be applied to each sections background.
var colors = ['#455a64','#616161','#5d4037'];
// The sections.
var sections = document.getElementsByClassName('section');
// The header tag to add to each section.
var section_header = document.createElement('h1');
// The count to be added to each sections title ex. <h1>Section Title #1.</h1>
var section_count = 1;
for(var index = 0; index <= colors.length; index++) {
// The text to be added to each sections header.
var section_header_txt = 'Section #' + section_count;
// Add the text with the incremented section count to the sections h1 element.
section_header.innerHTML = section_header_txt;
// Append the section header to its new section parent.
sections.item(index).appendChild(section_header); // This is where the TypeError is thrown.
// Add styles to each new section.
sections.item(index).style.backgroundColor = colors[index].toString();
sections.item(index).style.width = '100%';
sections.item(index).style.height = '100vh';
// Raise the section title count by 1.
section_count++;
}
</script>
</body>
</html>
Update:
As suggested below I changed the case operator from <= to just < but to no avail. I am still getting the same TypeError: cannot read property 'appendChild' of type null. Heres an a screenshot of the update and result:
Update to Dan's answer:
Screenshot below of the results from the changes suggested. I'm still getting this error.
Okay so I stripped away a bunch of the code and now it works. anything to do with the header element creation and appending is gone but i cant quite see the difference. Can anyone tell me from viewing this why it would work now. Strangely enough even though the background colors have been applied i still get the TypeError saying it can't read the style property?!?!
The type error is caused by the incorrect for loop condition. <= 4 will have the for loop execute on index 4, which would return undefined for the colors array.
There are other issues with the code you posted as well.
section_header element creation should be moved to inside the for loop. Otherwise, you will be rewriting the html of the same element and move it to the last section, resulting only the 3rd section having the section header text.GetElementsByClassname returns an array of the elements. You can simply use the array index to refer to the elements, no need for .itemsectionCount variable that increments manually.var colors = ['#455a64','#616161','#5d4037'];
// var sections is an array of elements with 'section' as classname
var sections = document.getElementsByClassName('section');
for(var index = 0; index < colors.length; index++) {
var section_header_txt = 'Section #' + ( index + 1 );
// create a new section header element for each section
var section_header = document.createElement('h1');
section_header.innerHTML = section_header_txt;
// instead of calling .item, just use array index
sections[index].appendChild(section_header);
sections[index].style.backgroundColor = colors[index].toString();
sections[index].style.height = '100vh';
}<div id="page-wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>