I'm trying to get this code to show me the book I've added at the end on the website, but it keeps showing me an error reading that appendChild(collection) is null. Can someone explain why it happens? I read similar questions and thought that it had to do with placing the at the end of the page, but that didn't work either.
//library data structure
let myLibrary = [];
//book data structure
class Book {
constructor(Title, Author, Pages, Read) {
this.Title = Title;
this.Author = Author;
this.Pages = Pages;
this.Read = Read;
}
}
//add book to library
function addBookToLibrary(Title, Author, Pages, Read){
let book = new Book(Title, Author, Pages, Read);
myLibrary.push(book);
}
function displayBooks (){
myLibrary.forEach(myLibrary => {
const library = document.querySelector('library-container');
const collection = document.createElement('div');
collection.classList.add('library');
console.log(collection);
const card = document.createElement('div');
card.classList.add("card");
for(let key in myLibrary){
console.log(`${key}: ${myLibrary[key]}`);
const text = document.createElement("p");
text.textContent = (`${key}: ${myLibrary[key]}`);
card.appendChild(text);
collection.appendChild(card);
library.appendChild(collection);
console.log(library);
}
})
}
addBookToLibrary("Atomic Habits", "James Clear", "295 Pages", "Not Read");
displayBooks();
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Library</title>
</head>
<body>
<h1>Library</h1>
<div class="library-container"></div>
</body>
</html>
<script src="index.js"></script>
The problem stems from a wrong selector given to .querySelector in displayBooks:
const library = document.querySelector('library-container');
Therefor, your library constant contains a null value and you cannot call .appendChild on null.
'library-container' isn't a valid selector, because HTML does not define a <library-container>-element. If your element has an ID, use:
const library = document.querySelector('#library-container');
If it has a class, use:
const library = document.querySelector('.library-container');
You can read more about valid selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors