Estoy tratando de obtener este código para mostrarme el libro que agregué al final en el sitio web, pero sigue mostrando un error al leer que appendChild (colección) es nulo. ¿Alguien puede explicar por qué sucede? Leí preguntas similares y pensé que tenía que ver con colocar el al final de la página, pero tampoco funcionó.
//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();Código HTML:
<!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>El problema se deriva de un selector incorrecto dado a .querySelector en displayBooks :
const library = document.querySelector('library-container');
Por lo tanto, su constante de library contiene un valor null y no puede llamar a .appendChild en null .
'library-container' no es un selector válido, porque HTML no define un elemento <library-container> . Si su elemento tiene una ID, use:
const library = document.querySelector('#library-container');
Si tiene una clase, use:
const library = document.querySelector('.library-container');
Puede leer más sobre los selectores válidos aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors