如何在屏幕上显示输入值？

Question

我一直无法显示输入值。它显示未定义的标题和作者，并在我指定数字时完全忽略页面。

链接 JS 小提琴：https : //jsfiddle.net/u3cb96x5/

这是我尝试过的 - 我创建了一个名为 addBookToLibrary 的函数来查询 DOM 值并创建新的 Book 对象，但由于函数范围，我将无法访问这些变量。

// 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>`;

}

我希望它显示未定义的指定输入字段的值

Answer 1

使用数组而不是“this”let book = library[library.length - 1];<td>${book.title}</td>