[英]How can display the input values onto the screen?
我一直無法顯示輸入值。 它顯示未定義的標題和作者,並在我指定數字時完全忽略頁面。
鏈接 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>`;
}
我希望它顯示未定義的指定輸入字段的值
因為在這些行中, this
不是您的新書:
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>`;
您應該將其更改為:
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>`;
this
指向您正在單擊的按鈕,該按鈕確實具有您正在尋找的屬性並且您正在獲取undefined
。 您可以從數組中取出最后一個對象來訪問當前值:
改變:
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>`;
到:
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>
我與更新的小提琴,在這里你是不是指與書細節this
,它是不是在范圍之內。
使用數組而不是“this”
let book = library[library.length - 1];
<td>${book.title}</td>
您的代碼中的問題是渲染中的 this 代表 addBook 節點未添加書
let addedBook = addBookToLibrary();
tr.innerHTML = `<td>${addedBook.title}</td>
<td>${addedBook.author}</td>
<td>${addedBook.pages}</td>';
另外您需要更新 addBookToLibrary 以返回添加的書,即
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;
}
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>`;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.