How can display the input values onto the screen?

Question

I have been having trouble displaying the input values. It shows undefined for title and author and completely ignores pages when I specify a number.

Link JS Fiddle: https://jsfiddle.net/u3cb96x5/

Here is what I tried - I created a function called addBookToLibrary to query the DOM values and create the new Book object but because of function scope, I will not be able to access those variables.

// Variables
const addBook = document.querySelector("#add");
// const remove = document.querySelector("#remove");
let library = [];

// Event Listeners
addBook.addEventListener("click", render);

class Book {
    constructor(title, author, pages, isRead) {
        this.title = title;
        this.author = author;
        this.pages = pages;
        this.isRead = isRead;
    }
}

function addBookToLibrary() {
    let authorOfBook = document.querySelector("#author").value;
    let bookTitle = document.querySelector("#book-title").value;
    let numberOfPages = document.querySelector("#pages").value;
    let status = document.querySelector("#isRead").value;
    let newBook = new Book(bookTitle, authorOfBook, numberOfPages, status);
    library.push(newBook);
}

function render() {

    addBookToLibrary();
    let table = document.querySelector("table");
    let tr = document.createElement("tr");

    table.appendChild(tr);
    tr.innerHTML = `<td>${this.title}</td>
                    <td>${this.author}</td>
                    <td>${this.pages}</td>
                    <td><button class="table-buttons" id="not-read">Not Read</button></td>
                    <td><button class="table-buttons" id="remove">Delete</button></td>`;
}

I want it to show the values of the specified input field not undefined

Answer 1

Because in these lines, this is not your new book:

tr.innerHTML = `<td>${this.title}</td>
                <td>${this.author}</td>
                <td>${this.pages}</td>
                <td><button class="table-buttons" id="not-read">Not Read</button></td>
                <td><button class="table-buttons" id="remove">Delete</button></td>`;

You should change it to:

let new_book = library[library.length - 1];
tr.innerHTML = `<td>${new_book.title}</td>
                <td>${new_book.author}</td>
                <td>${new_book.pages}</td>
                <td><button class="table-buttons" id="not-read">Not Read</button></td>
                <td><button class="table-buttons" id="remove">Delete</button></td>`;

Working fiddle

Answer 2

this points to the button you are clicking which does have the properties you are looking for and you are getting undefined . You can take the last object from the array to access the current values:

Change:

tr.innerHTML = `<td>${this.title}</td>
                <td>${this.author}</td>
                <td>${this.pages}</td>
                <td><button class="table-buttons" id="not-read">Not Read</button></td>
                <td><button class="table-buttons" id="remove">Delete</button></td>`;

To:

let book = library[library.length-1];
tr.innerHTML = `<td>${book.title}</td>
              <td>${book.author}</td>
              <td>${book.pages}</td>
              <td><button class="table-buttons" id="not-read">${book.isRead}</button></td>
              <td><button class="table-buttons" id="remove">Delete</button></td>`;

 // Variables const addBook = document.querySelector("#add"); // const remove = document.querySelector("#remove"); let library = []; // Event Listeners addBook.addEventListener("click", render); class Book { constructor(title, author, pages, isRead) { this.title = title; this.author = author; this.pages = pages; this.isRead = isRead; } } function addBookToLibrary() { let authorOfBook = document.querySelector("#author").value; let bookTitle = document.querySelector("#book-title").value; let numberOfPages = document.querySelector("#pages").value; let status = document.querySelector("#isRead").value; let newBook = new Book(bookTitle, authorOfBook, numberOfPages, status); library.push(newBook); } function render() { //console.log(this)//<button id="add">Add Book</button> addBookToLibrary(); let table = document.querySelector("table"); let tr = document.createElement("tr"); table.appendChild(tr); let book = library[library.length-1]; tr.innerHTML = `<td>${book.title}</td> <td>${book.author}</td> <td>${book.pages}</td> <td><button class="table-buttons" id="not-read">${book.isRead}</button></td> <td><button class="table-buttons" id="remove">Delete</button></td>`; }

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--primary-font); outline: 0; } :root { /* Fonts */ --primary-font: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Colors */ --primary-color: #33C3F0;; --button-hover: #0FA0CE;; --gray: #F4F3F9; --black: #222; --border: #d1d1d1; --white: #fff; --border-bottom: rgb(230, 230, 230); } body { background-color: var(--gray); } .container { margin: 3% 9%; } header h1 { margin-bottom: 25px; font-weight: 500 } header p { margin-bottom: 30px; font-weight: 500; font-size: 21px; } main form { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border-bottom); padding-bottom: 40px; } .input { height: 40px; border: 1px solid var(--border); border-radius: 3px; padding-left: 10px; margin-top: 4px; } .input:hover { border: 1px solid var(--primary-color); } label { display: flex; flex-direction: column; justify-content: flex-start; margin-right: 25px; font-weight: bold; } #author { width: 180px; } #book-title { width: 330px; } #pages, #isRead { width: 130px; } form button { margin-top: 20px; width: 130px; height: 35px; border-radius: 4px; background-color: var(--primary-color); color: var(--white); border: none; text-transform: uppercase; font-weight: 700; font-size: 10px; } form button:hover { background-color: var(--button-hover); } select { background-color: inherit; } table { width: 100%; margin-top: 50px; } table td { padding-top: 10px; } .table-buttons { width: 100px; height: 35px; background-color: transparent; color: var(--black); border-radius: 4px; border: 1px solid var(--black); text-transform: uppercase; } .table-buttons:hover { border: 1px solid rgb(139, 139, 139); }

 <div class="container"> <header> <h1>Libray one</h1> <p>Enter book details:</p> </header> <main> <form action="" method=""> <label for="author">Author <input type="text" placeholder="Author" class="input" id="author" name="author"> </label> <label for="book-title">Book Title <input type="text" placeholder="Enter Title" class="input" id="book-title" name="title"> </label> <label for="pages">Pages <input type="text" placeholder="Pages" class="input" id="pages" name="pages"> </label> <label for="isRead">Status <select name="status" class="input" id="isRead"> <option value="read">Read</option> <option value="not-read">Not read</option> </select> </label> </form> <button id="add">Add Book</button> <table> <!-- Book collection javaScript --> </table> </main> </div>

Answer 3

我与更新的小提琴，在这里你是不是指与书细节this ，它是不是在范围之内。

Answer 4

Use array instead of 'this'

let book = library[library.length - 1];
<td>${book.title}</td>

Answer 5

the problem in your code is that this in render represent addBook node not added book

let addedBook = addBookToLibrary();
 tr.innerHTML = `<td>${addedBook.title}</td>
                <td>${addedBook.author}</td>
                <td>${addedBook.pages}</td>';

plus you need to update addBookToLibrary to return added book ie

    function addBookToLibrary() {
    let authorOfBook = document.querySelector("#author").value;
    let bookTitle = document.querySelector("#book-title").value;
    let numberOfPages = document.querySelector("#pages").value;
    let status = document.querySelector("#isRead").value;
    let newBook = new Book(bookTitle, authorOfBook, numberOfPages, status);
    library.push(newBook);
    return newBook;
}

Answer 6

1. <table id='myTable'>

2.

function render() {
    addBookToLibrary();
    let tab = document.querySelector("#myTable");
    let newBook = library.slice(-1).pop();
    tab.innerHTML+= `<tr><td>${newBook.title}</td>
                    <td>${newBook.author}</td>
                    <td>${newBook.pages}</td>
                    <td><button class="table-buttons" id="not-read">Not Read</button></td>
                    <td><button class="table-buttons" id="remove">Delete</button></td></tr>`;
}

fiddle