Question

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

这是我尝试过的 -我创建了一个名为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不是您的新书：

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

Working fiddle

Answer 2

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>

Answer 3

我用fiddle更新了，这里您不是在用this来指代本书的详细信息，它不在范围内。

Answer 4

使用数组代替“ this”

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

Answer 5

您的代码中的问题是渲染器中的这个代表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;
}

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

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

6 个答案: