图书馆 - 添加书籍 - HTM、CSS、JavaScript答案

【问题标题】：Library - adding books - HTM, CSS, JavaScript图书馆 - 添加书籍 - HTM、CSS、JavaScript
【发布时间】：2022-01-16 00:32:34
【问题描述】：

我没有找到回复，所以我正在创建一个新帖子。我是 JS 的新手，我想创建一种库。解释：我们有一个输入“用户”和“作者”和“类别”的表单按钮 - 提交表单。我想在其下显示我的表单中的数据（如所附屏幕截图所示）。

我的问题是我特别不知道如何从表单中显示新数据（请看代码）。我当然确定我应该使用一种循环来创建和显示带有嵌套 LI 的新 UL，但我不知道如何：/。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="title"></label>
        <input type="text" name="title" id="title">
        <label for="author"></label>
        <input type="text" name="author" id="author">
        <label for="category"></label>
        <select name="category" id="category">
            <option value="fantasy">Fantasy</option>
            <option value="sci-fi">Sci-Fi</option>
            <option value="romans">Romans</option>
        </select>
        <button type="submit" id="submit">Zatwierdź</button>
    </form>
    
    <script src="script.js"></script>
</body>
</html>

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

let btn = document.getElementById('submit');

let books = [];

function submitForm(event) {
    event.preventDefault();
    
    let title = document.getElementById('title').value;
    let author = document.getElementById('author').value;
    let category = document.getElementById('category').value;

    let book = new Book(title,author,category);

    books.push(book);

    let elementUl = document.createElement('ul');

    function addElement() {
        
        let elementTitle = document.createElement('li');
        let elementAuthor = document.createElement('li');
        let elementCategory = document.createElement('li');
    
        let titleContent = document.createTextNode("Title: " + books[0].title);
        let authorContent = document.createTextNode("Author: " + books[0].author);
        let categoryContent = document.createTextNode("Category: " + books[0].category);
           
        elementTitle.appendChild(titleContent);
        elementAuthor.appendChild(authorContent);
        elementCategory.appendChild(categoryContent);
    
        elementUl.appendChild(elementTitle);
        elementUl.appendChild(elementAuthor);
        elementUl.appendChild(elementCategory);
    
        document.querySelector('body').appendChild(elementUl);
    }  

    addElement();
      
}

btn.addEventListener('click',submitForm);

【问题讨论】：

标签： javascript arrays list onclick javascript-objects

【解决方案1】：

您可以很好地创建 book 元素，但是在行中：

let titleContent = document.createTextNode("Title: " + books[0].title);
let authorContent = document.createTextNode("Author: " + books[0].author);
let categoryContent = document.createTextNode("Category: " + books[0].category);

你继续插入第一本书。

此外，每次添加新的li 元素时，您都会不断创建一个新的ul，并将所有图书的属性添加到不同的列表元素中。

因此，您需要重构代码，将所有书籍信息添加到一个列表元素中，然后将其添加到列表中。

首先，您需要在 HTML 中的 form 元素之后创建一个 ID 为 book-list 的 ul 元素。

然后您需要通过在 addElement 函数之外获取 ul 元素来更改代码，并使用它来添加新的 book 元素：

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

let btn = document.getElementById('submit');
let elementUl = document.getElementById('book-list');

let books = [];

function addElement(book) {
    
    // Convert these elements to p, in order to hold your book info.    
    let elementTitle = document.createElement('p');
    let elementAuthor = document.createElement('p');
    let elementCategory = document.createElement('p');
    
    // The list element that will hold all book info.
    let bookElement = document.createElement('li');

    let titleContent = document.createTextNode("Title: " + book.title);
    let authorContent = document.createTextNode("Author: " + book.author);
    let categoryContent = document.createTextNode("Category: " + book.category);

    elementTitle.appendChild(titleContent);
    elementAuthor.appendChild(authorContent);
    elementCategory.appendChild(categoryContent);
    
    // Add all book info to list element.
    bookElement.appendChild(elementTitle);
    bookElement.appendChild(elementAuthor);
    bookElement.appendChild(elementCategory);
    
    // Add list element to list.
    elementUl.appendChild(bookElement);
}

function submitForm(event) {
    event.preventDefault();
    
    let title = document.getElementById('title').value;
    let author = document.getElementById('author').value;
    let category = document.getElementById('category').value;

    let book = new Book(title,author,category);

    books.push(book);     

    addElement(book);
      
}

btn.addEventListener('click',submitForm);

【讨论】：