使用 innerHTML javascript 從數組中刪除特定元素
[英]Delete specific element from array with innerHTML javascript
問題描述
我需要在 javascript 中創建一個簡單的項目，我們需要創建一個包含 javascript 對象的單個庫並讓用戶添加新書。 我在 html 中使用表單標簽請求用戶數據並創建了新對象，並將它們存儲在一個名為 library 的單個數組中。 這些書在 DOM 中顯示沒有問題，問題是我需要一個刪除特定書的按鈕，我創建了一個按鈕，但它只刪除數組中的第一本書。 我希望你能幫助我。
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">
<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>';
}
};
1 個解決方案
解決方案1
1 2021-05-20 16:33:50
您已將library[i]作為純文本寫入 DOM。 這不會引用循環中的變量i 。
您可以簡單地將索引編寫為參數，然后直接在 function delete_book中使用它。
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, index){ arr.splice(index, 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, ${i});">Delete</button><br>`; } };
<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
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.