(Javascript) Using an array to reference 'innerHTML' caused an error

Question

I am relatively new to Javascript, but have decided to make a library website as my first project. While making said project, I came across an error when i tried to set innerHTML via values from an array. Here is my (messy) code:

var catalog = [];

function book (title, firstName, lastName, number, publisher, image, checkedOut)  {
    this.title = title;
    this.firstName = firstName;
    this.lastName = lastName;
    this.number = number;
    this.publisher = publisher;
    this.image = image;
    this.isCheckedOut = checkedOut;

}
function addToCatalog (entry){
    entry.number = catalog.length ;
    catalog[entry.number] = entry;
}
$newbook = new book("Lost in the Woods", "Hubert", "Holmes", "3", "Junior Scholastic", "https://marketplace.canva.com/MAB5W63LDsw/1/0/thumbnail_large/canva-woods-thriller-e-book-cover-MAB5W63LDsw.jpg", false);
addToCatalog($newbook);

$newbook = new book("To Kill A Mockingbird", "Harper", "Lee", "1", "Junior Scholastic", "https://s-media-cache-ak0.pinimg.com/736x/a0/96/ff/a096ff3bafb7786b59ef9ba9d3e7ddf2.jpg", false);
addToCatalog($newbook);

var address = document.createElement("DIV");
address.setAttribute("class", "eachBook");
var picture = document.createElement("img");
picture.setAttribute("src", "http://www.iconsdb.com/icons/preview/gray/literature-xxl.png" );
picture.setAttribute("class", "bookImg");
picture.setAttribute("alt", "Auburn Library Book");
var gtitle = document.createElement("h4");
gtitle.setAttribute("class", "bTitle");
var dname = document.createElement("p");
dname.setAttribute("class", "bName");
var button = document.createElement("button");
button.setAttribute("class", "checkout");
checkout = document.createTextNode("Checkout");
button.appendChild(checkout);
//Text in button
var available = document.createElement("p");
available.setAttribute("class", "available");
avail = document.createTextNode("Available");
available.appendChild(avail);
//text in available

function createBooks(){
    document.getElementById("displayBooks").appendChild(address);
    address.appendChild(picture);
    address.appendChild(gtitle);
    address.appendChild(dname);
    address.appendChild(button);
    address.appendChild(available);
}
function write(){
    var x = 0;
    var arr;
    while (x < catalog.length){
        createBooks();
        arr = document.getElementsByClassName("bTitle");
        arr[x].innerHTML = catalog[x].title; //Part A
        arr = document.getElementsByClassName("bName");
        arr[x].innerHTML = catalog[x].firstName +" "+ catalog[x].lastName;//Part B
        arr = document.getElementsByTagName("img");
        arr[x].src = catalog[x].image;
        x++;
    }

}

window.onload = function(){
   write();
};

At part A is where I get my error stating "TypeError: Cannot set property 'innerHTML' of undefined". However, I used the alert function and got a value for catalog[0] (Lost in the Woods). It also seems like the code may only fail after the first time through the loop, as I only get it to properly work the first time through. I think it may be innerHTML causing the problem entirely, as when i comment out part A, part B appears to have the same error. Please help me figure out this mistake, and also (since I am a beginner, both to this site and Javascript), tell me how to approach this problem from a better angle. And please keep the answer beginner-friendly as well (If you can)

Answer 1

You are creating the 'address' element in the parent scope so in createBooks you are appending the same element. Appending the same element removes it then appends it so you cannot have the second div there. That's why your array length is 2 but the number of 'address' DIVs you have is only 1.

Just move your code block starts with

var address = document.createElement("DIV");

inside the createBooks() , before

document.getElementById("displayBooks").appendChild(address);

Here is the runnable snippet:

 var catalog = []; function book (title, firstName, lastName, number, publisher, image, checkedOut) { this.title = title; this.firstName = firstName; this.lastName = lastName; this.number = number; this.publisher = publisher; this.image = image; this.isCheckedOut = checkedOut; } function addToCatalog (entry){ entry.number = catalog.length ; catalog[entry.number] = entry; } $newbook = new book("Lost in the Woods", "Hubert", "Holmes", "3", "Junior Scholastic", "https://marketplace.canva.com/MAB5W63LDsw/1/0/thumbnail_large/canva-woods-thriller-e-book-cover-MAB5W63LDsw.jpg", false); addToCatalog($newbook); $newbook = new book("To Kill A Mockingbird", "Harper", "Lee", "1", "Junior Scholastic", "https://s-media-cache-ak0.pinimg.com/736x/a0/96/ff/a096ff3bafb7786b59ef9ba9d3e7ddf2.jpg", false); addToCatalog($newbook); function createBooks(){ var address = document.createElement("DIV"); address.setAttribute("class", "eachBook"); var picture = document.createElement("img"); picture.setAttribute("src", "http://www.iconsdb.com/icons/preview/gray/literature-xxl.png" ); picture.setAttribute("class", "bookImg"); picture.setAttribute("alt", "Auburn Library Book"); var gtitle = document.createElement("h4"); gtitle.setAttribute("class", "bTitle"); var dname = document.createElement("p"); dname.setAttribute("class", "bName"); var button = document.createElement("button"); button.setAttribute("class", "checkout"); checkout = document.createTextNode("Checkout"); button.appendChild(checkout); //Text in button var available = document.createElement("p"); available.setAttribute("class", "available"); avail = document.createTextNode("Available"); available.appendChild(avail); //text in available document.getElementById("displayBooks").appendChild(address); address.appendChild(picture); address.appendChild(gtitle); address.appendChild(dname); address.appendChild(button); address.appendChild(available); } function write(){ var x = 0; var arr; while (x < catalog.length){ createBooks(); arr = document.getElementsByClassName("bTitle"); arr[x].innerHTML = catalog[x].title;//Part A arr = document.getElementsByClassName("bName"); arr[x].innerHTML = catalog[x].firstName +" "+ catalog[x].lastName;//Part B arr = document.getElementsByTagName("img"); arr[x].src = catalog[x].image; x++; } } window.onload = function(){ write(); };

 body { background-color: #F5EBEB; } #header { background-image: url("http://il2.picdn.net/shutterstock/videos/2990449/thumb/1.jpg") ; font-family: Rockwell, Tahoma, Arial; color: #FFFFFF; display: block; } #header p{ font-family: Arial, "Times New Roman"; } #panel{ background-color: #922724; font-family: Rockwell, Arial; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px ; } .dropdown{ display: block; position: relative; } .dropbtn{ background-color: #FFFFFF; border: none; color: #922724; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Rockwell; font-weight: bold; } .dropbtn:hover{ color: #700502; } .content{ background-color: #FFFFFF; border: none; color: #922724; padding: 5px 5px; text-align: center; text-decoration: none; font-size: 16px; font-family: Rockwell; overflow: auto; position: relative; display: none; } .content li{ color: black; display: block; float: left; position: relative; cursor: pointer; } .dropdown:hover .content{ display: inline-block; } .content li:hover{ background-color: #DDDDDD; display: block; } #displayBooks{ font-family: Rockwell; border-color: #1B0807; border-style: solid; border-width: 3px; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px ; } .eachBook{ font-family: Rockwell; background-color: #FFFEFF; border-style: solid none solid none; border-color: #DDD; border-width: 2px; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px ; overflow: auto; } .eachBook h4{ font-size: 20px } .bookImg{ width: 150px; height:225px; overflow: auto; float: left; margin: 5px 5px 5px 5px ; } .checkout{ background-color: #DDDDDD; border: none; color: #922724; padding: 5px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Rockwell; font-weight: bold; } .checkout:hover{ background-color: #922724; color: #FFFFFF; } .available{ color: #2F2; font-weight: bold; } .unavailable{ color: #F22; font-weight: bold; }

 <div id="header"> <h1>Welcome to Auburn Library</h1> <p>Where knowledge is truly power.</p> </div> <div id="panel"> <div class="dropdown"> <button class ="dropbtn">Display Books...</button> <ul class="content"> <li> Alphabeticaly (A - Z) </li> <li> Alphabeticaly (Z - A)</li> <li> By Author (A - Z)</li> <li> By Author (Z - A)</li> <li> By Number (Low - High)</li> <li> By Number (High - Low)</li> </ul> </div> <form> </form> <!-- Right next to it is a checkbox: only "in" books or all books --> </div> <div id="displayBooks"> <h2 style="text-align: center;">Book Catalog </h2> </div>