英文:
How do I delete a specific item instead of the last item in my list using onclick
问题
I am creating a program that contains items for a shopping list and then the user can add items to the list. I want the user to able to delete items from the shopping list by simply clicking on the item. When I click on the item, the last item gets deleted no matter which item I click on. I just want to find out why only the last item in my array is getting deleted instead of the item that I am selecting.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物清单</title>
<!-- 链接 Google 字体 -->
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- 外部 CSS 链接 -->
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container">
<h2>购物清单</h2>
<div class="header">
<input type="text" id="input" placeholder="物品">
<span onclick="updateList(myArray)" id="addBtn"><button>添加物品</button></span>
</div>
<span value="删除" class="close" onclick="deleteItem(myArray)">
<ul id="itemList">
</ul>
</span>
</div>
<script src="mainForTask2.js"></script>
</body>
</html>
JavaScript：
// 这是一个 JavaScript 程序，将数组中的项目添加到无序列表中
let myArray = ["糖", "牛奶", "面包", "苹果"];
let list1 = document.querySelector("#itemList");
// 此函数将数组项目添加到列表中
arrayList = (arr) => {
let items = arr.forEach(item => {
let li = document.createElement('li');
li.textContent = item;
list1.appendChild(li);
});
}
arrayList(myArray);
// 此函数更改两个列表项目的背景颜色，以显示它们已出售
const idSelector = () => {
let idElement = document.getElementsByTagName("li");
idElement[0].style.color = "red";
idElement[3].style.color = "red";
console.log(idElement.value);
}
idSelector();
// 此函数使用表单中的用户输入将项目添加到列表中
updateList = (arr) => {
let blue = document.getElementById("input").value;
if (blue === "") {
alert("如果要添加物品，请输入值。");
} else {
arr.push(blue);
list1.innerHTML = '';
arrayList(myArray);
idSelector();
}
}
// 此函数旨在从购物清单和数组中删除用户选择的指定项目
deleteItem = (arr) => {
let red = document.getElementById("close");
const index = arr.indexOf(red);
const x = arr.splice(index, 1);
console.log(arr);
console.log(x);
list1.innerHTML = '';
arrayList(myArray);
idSelector();
}
请注意，HTML 和 JavaScript 代码已被翻译成中文。
英文:
I am creating a program that contains items for a shopping list and then the user can add items to the list. I want the user to able to delete items from the shopping list by simply clicking on the item. When I click on the item, the last item gets deleted no matter which item I click on. I just want to find out why only the last item in my array is getting deleted instead of the item that I am selecting.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping List</title>
<!-- Link Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- External CSS link-->
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container">
<h2>Shopping List</h2>
<div class="header">
<input type="text" id="input" placeholder="Item">
<span onclick="updateList(myArray)" id="addBtn"><button>Add Item</button></span>
</div>
<span value="\uOOD7" class="close" onclick="deleteItem(myArray)">
<ul id="itemList">
</ul>
</span>
</div>
<script src="mainForTask2.js"></script>
</body>
</html>
Javascript
//This is a javascript program which added the items in my array to an unordered list
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");
//This function pushed my array items to create the list
arrayList = (arr) => {
let items = arr.forEach(item => {
let li = document.createElement('li');
li.textContent = item;
list1.appendChild(li)
});
}
arrayList(myArray)
//This function changed the background color of two of the list items to show that they are sold
const idSelector = () => {
let idElement = document.getElementsByTagName("li")
idElement[0].style.color = "red"
idElement[3].style.color = "red"
console.log(idElement.value)
}
idSelector()
//This function uses the user input from the form to add items to the list
updateList = (arr) => {
let blue = document.getElementById("input").value;
if (blue === "") {
alert("Please enter a value if you wish to add something to your
list.")
} else {
arr.push(blue);
list1.innerHTML = '';
arrayList(myArray)
idSelector()
}
}
//This function is meant to delete the specified item chosen by the user from the shopping list and the array
deleteItem = (arr) => {
let red = document.getElementById("close");
const index = arr.indexOf(red);
const x = arr.splice(index, 1)
console.log(arr)
console.log(x)
list1.innerHTML = '';
arrayList(myArray)
idSelector()
}
答案1
得分: 0
首先，我们需要找到被点击的元素，然后找到其索引，然后从数组中移除特定的元素。
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");
// 这个函数将数组中的项目添加到列表中
arrayList = (arr) => {
let items = arr.forEach(item => {
let li = document.createElement('li');
li.textContent = item;
list1.appendChild(li)
});
}
arrayList(myArray)
// 这个函数将两个列表项的背景颜色更改为红色，以显示它们已售出
const idSelector = () => {
let idElement = document.getElementsByTagName("li")
idElement[0].style.color = "red"
idElement[3].style.color = "red"
}
idSelector()
// 这个函数使用表单中的用户输入将项目添加到列表中
updateList = (arr) => {
let blue = document.getElementById("input").value;
if (blue === "") {
alert("如果您希望添加东西到您的列表，请输入一个值。")
} else {
arr.push(blue);
list1.innerHTML = '';
arrayList(myArray)
idSelector()
}
}
// 这个函数旨在从购物列表和数组中删除用户选择的指定项目
deleteItem = (event) => {
let clk = event.target.innerHTML;
//console.log(clk);
let index = myArray.indexOf(clk);
if (index > -1)
{
myArray.splice(index, 1);
}
list1.innerHTML = '';
arrayList(myArray)
}
HTML 部分保持不变。
英文:
Here first we need to find the clicked element than find its index and than remove the particular element from the array.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");
//This function pushed my array items to create the list
arrayList = (arr) => {
let items = arr.forEach(item => {
let li = document.createElement('li');
li.textContent = item;
list1.appendChild(li)
});
}
arrayList(myArray)
//This function changed the background color of two of the list items to show that they are sold
const idSelector = () => {
let idElement = document.getElementsByTagName("li")
idElement[0].style.color = "red"
idElement[3].style.color = "red"
}
idSelector()
//This function uses the user input from the form to add items to the list
updateList = (arr) => {
let blue = document.getElementById("input").value;
if (blue === "") {
alert("Please enter a value if you wish to add something to your list.")
} else {
arr.push(blue);
list1.innerHTML = '';
arrayList(myArray)
idSelector()
}
}
//This function is meant to delete the specified item chosen by the user from the shopping list and the array
deleteItem = (event) => {
let clk = event.target.innerHTML;
//console.log(clk);
let index = myArray.indexOf(clk);
if (index > -1)
{
myArray.splice(index, 1);
}
list1.innerHTML = '';
arrayList(myArray)
}
<!-- language: lang-html -->
<body>
<div class="container">
<h2>Shopping List</h2>
<div class="header">
<input type="text" id="input" placeholder="Item">
<span onclick="updateList(myArray)" id="addBtn"><button>Add Item</button></span>
</div>
<span value="\uOOD7" class="close" onclick="deleteItem(event)">
<ul id="itemList">
</ul>
</span>
</div>
<script src="mainForTask2.js"></script>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论