图书馆 - 添加书籍 - HTM、CSS、JavaScript
Posted
技术标签:
【中文标题】图书馆 - 添加书籍 - HTM、CSS、JavaScript【英文标题】：Library - adding books - 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);
【问题讨论】：
【参考方案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);
【讨论】：
以上是关于图书馆 - 添加书籍 - HTM、CSS、JavaScript的主要内容，如果未能解决你的问题，请参考以下文章
我可以用 HTML/CSS 和 javascript 创建一个登录页面，然后再添加 VUE 吗？