使用innerHTML javascript从数组中删除特定元素
我需要用javascript做一个简单的项目，我们需要用javascript对象创建一个库，让用户添加新书。我用html格式的表单标记请求用户数据，创建新对象，并将它们存储在一个名为library的数组中。这些书在DOM中显示时没有问题。问题是我需要一个按钮来删除一本特定的书，我创建了一个按钮，但它只删除数组中的第一本书。我希望你能帮助我 HTML:使用innerHTML javascript从数组中删除特定元素,javascript,arrays,javascript-objects,Javascript,Arrays,Javascript Objects,我需要用javascript做一个简单的项目，我们需要用javascript对象创建一个库，让用户添加新书。我用html格式的表单标记请求用户数据，创建新对象，并将它们存储在一个名为library的数组中。这些书在DOM中显示时没有问题。问题是我需要一个按钮来删除一本特定的书，我创建了一个按钮，但它只删除数组中的第一本书。我希望你能帮助我 HTML: 文件 我的图书馆 对 不 -----------------------------------------------------------
文件
我的图书馆
对
不
------------------------------------------------------------------------------------------------
JAVASCRIPT:
var库=[]；
var title_input=document.getElementById（“title”）；
var author_input=document.getElementById（“作者”）；
var date_input=document.getElementById（“日期”）；
var read_input=document.getElementById（“read”）；
功能书（标题、作者、日期、阅读）{
this.title=标题；
this.author=作者；
this.date=日期
this.read=read
};
函数add_book（）{
var newBook=新书（标题输入、作者输入、日期输入、阅读输入）
library.push（`Title:${newBook.Title.value}
`+`Author:${newBook.Author.value}
`+
`Realease日期：${newBook.date.value}
`+`Readed:${newBook.read.value}
`）
显示_库（）；
};
功能删除书（arr、elem）{
索引=arr.indexOf（elem）；
阵列拼接（1个元件）；
显示_库（）；
}
函数show_library（）{
document.getElementById（“显示”）.innerHTML=“”；
对于（i=0；i您已将库[i]
作为纯文本写入DOM。这不会引用循环中的变量i
您只需将索引作为参数写入，并直接在函数delete\u book
中使用即可
var库=[]；
var title_input=document.getElementById（“title”）；
var author_input=document.getElementById（“作者”）；
var date_input=document.getElementById（“日期”）；
var read_input=document.getElementById（“read”）；
功能书（标题、作者、日期、阅读）{
this.title=标题；
this.author=作者；
this.date=日期
this.read=read
};
函数add_book（）{
var newBook=新书（标题输入、作者输入、日期输入、阅读输入）
library.push（`Title:${newBook.Title.value}
`+`Author:${newBook.Author.value}
`+
`Realease日期：${newBook.date.value}
`+`Readed:${newBook.read.value}
`）
显示_库（）；
};
函数delete_book（arr，index）{
阵列拼接（索引1）；
显示_库（）；
}
函数show_library（）{
document.getElementById（“显示”）.innerHTML=“”；
因为（i=0；我很感谢斯文！！！成功了。
<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">
<link rel="stylesheet" href="./styles.css" />
<title>Document</title>
</head>
<body>
<h1>My Library</h1>
<input id="title" type="text" placeholder="Book Title">
<input id="author" type="text" placeholder="Book Author">
<input id="date" type="text" placeholder="Publish Date">
<select id="read" name="read">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="button" value="New Book" onclick="add_book()">
<div id="display"></div>
<script src="app.js"></script>
</body>
</html>
------------------------------------------------------------------------------------------------
JAVASCRIPT:
var library = [];
var title_input = document.getElementById("title");
var author_input = document.getElementById("author");
var date_input = document.getElementById("date");
var read_input = document.getElementById("read");
function Book(title, author, date, read) {
this.title = title;
this.author = author;
this.date = date
this.read = read
};
function add_book() {
var newBook = new Book(title_input, author_input, date_input, read_input)
library.push(`Title: ${newBook.title.value} <br>`+`Author: ${newBook.author.value} <br>`+
`Realease date: ${newBook.date.value} <br>`+`Readed: ${newBook.read.value} <br>` )
show_library();
};
function delete_book(arr, elem){
index = arr.indexOf(elem);
arr.splice(elem,1);
show_library();
}
function show_library() {
document.getElementById("display").innerHTML = "";
for(i = 0; i<library.length; i++){
document.getElementById("display").innerHTML += library[i]+
'<button onclick="delete_book(library, library[i]);">Delete</button><br>';
}
};