javascript - Odin Project: Library (I am trying to display a book object but cant seem to get it)

Question

I am trying to get my javascript objects to display in my project but cant seem to get it. Currently I am able to add the new book to my library array but I cannot display it on my page. Any help would be much appreciated as I am just starting out. Thank You

const author = document.getElementById('author');
const pages = document.getElementById('pages');
const btn = document.getElementById('btn');
const bookContainer = document.getElementById('book-container')
const addBookBtn = document.getElementById('addBookBtn');
let library = [];

class book {
    constructor(title, author, pages) {
        this.title = title;
        this.author = author;
        this.pages = pages;

    }
}

function addBook() {
    const title = document.getElementById('title').value;
    const author = document.getElementById('author').value;
    const pages = document.getElementById('pages').value;
    let newBook = new book(title, author, pages);
    library.push(newBook);
    console.log(library);
    displayBook();

}

function displayBook() {

    for (let i = 0; i < library.length; i++) {
        createBook(library[i]);
    }
}
function createBook(newBook) {
    const newBookHolder = document.createElement('div');
    const titleDisplay = document.createElement('div');
    const authorDisplay = document.createElement('div');
    const pagesDisplay = document.createElement('div');
    const readBtn = document.createElement('button')
    const deleteBtn = document.createElement('button')

    newBookHolder.classList.add('libraryGrid');
    titleDisplay.classList.add('libraryAttribute');
    authorDisplay.classList.add('libraryAttribute');
    pagesDisplay.classList.add('libraryAttribute');
    readBtn.classList.add('libraryBtn');
    deleteBtn.classList.add('libraryBtn');


    titleDisplay.textContent = newBook.title;
    authorDisplay.textContent = newBook.author;
    pagesDisplay.textContent = newBook.pages;
    readBtn.textContent = 'Read?'
    deleteBtn.textContent = 'Delete';

    newBookHolder.appendChild(titleDisplay);
    newBookHolder.appendChild(authorDisplay);
    newBookHolder.appendChild(pagesDisplay);
    newBookHolder.appendChild(readBtn);
    newBookHolder.appendChild(deleteBtn);
}

question from:https://stackoverflow.com/questions/66056301/odin-project-library-i-am-trying-to-display-a-book-object-but-cant-seem-to-get

Answer 1

Waitting for answers