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

我在显示输入值时遇到问题。它显示未定义的标题和作者，当我指定一个数字时完全忽略页面

链接 JS小提琴：

这是我试过的 -我创建了一个名为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>`;
}

//变量
const addBook=document.querySelector（“添加”）；
//const remove=document.querySelector（#remove”）；
让库=[]；
//事件侦听器
addBook.addEventListener（“单击”，渲染）；
课堂用书{
构造函数（标题、作者、页数、isRead）{
this.title=标题；
this.author=作者；
this.pages=页面；
this.isRead=isRead；
}
}
函数addBookToLibrary（）{
让authorOfBook=document.querySelector（“#author”）.value；
让bookTitle=document.querySelector（“#book title”）.value；
设numberOfPages=document.querySelector（“#pages”）.value；
let status=document.querySelector（“#isRead”）.value；
let newBook=新书（书名、作者书籍、页数、状态）；
图书馆。推送（新书）；
}
函数render（）{
addBookToLibrary（）；
let table=document.querySelector（“表”）；
设tr=document.createElement（“tr”）；
表1.儿童（tr）；
tr.innerHTML=`${this.title}
${this.author}
${this.pages}
不读
删除`；
}

---

我希望它显示未定义的指定输入字段的值，因为在这些行中，

这不是您的新书：

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

tr.innerHTML=`${this.title}
${this.author}
${this.pages}
不读
删除`；

您应该将其更改为：

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

let new_book=library[library.length-1]；
tr.innerHTML=`${new_book.title}
${new_book.author}
${new_book.pages}
不读
删除`；

此
指向您正在单击的按钮，该按钮具有您正在查找的属性，并且您将获得未定义的
。可以从数组中获取最后一个对象以访问当前值：

更改：

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


天秤座一号
输入图书详细信息：

作者
书名
页
地位
阅读
不读
添加书本
我用更新了，这里您不是用
this
引用书籍详细信息，它不在范围内。
使用数组而不是“this”

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

let book=library[library.length-1]；
${book.title}
代码中的问题是，此in render表示addBook节点，而不是addBook

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

1.

二,

function render（）{
addBookToLibrary（）；
let tab=document.querySelector（#myTable”）；
让newBook=library.slice（-1.pop（）；
tab.innerHTML+=`${newBook.title}
${newBook.author}
${newBook.pages}
不读
删除`；
}


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

    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;
}

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