英文:
How to add an item to a list using DOM manipulation without the original list repeating
问题
我正在创建一个程序，它为用户提供了一组杂货项目，用于购物清单，并将其显示出来。然后，它以HTML表单的形式为用户提供输入。它必须使用该输入来添加到列表中。我的问题是，输入新值后，它会显示原始列表和新更新的列表。
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
// 这是一个 JavaScript 程序，它将数组中的项目添加到无序列表中
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"
console.log(idElement.value)
}
idSelector()
// 此函数使用来自表单的用户输入来添加项目到列表中
updateList = (arr) => {
let blue = document.getElementById("input").value;
alert(blue)
if (blue === "") {
alert("如果您想添加内容到您的清单，请输入一个值。")
} else {
arr.push(blue);
console.log(arr)
arrayList(myArray)
}
}
<!-- 语言: lang-html -->
<!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>
<ul id="itemList">
<span value="" class="close">
</span>
</ul>
</div>
<script src="mainForTask2.js"></script>
</body>
</html>
<!-- 结束代码片段 -->
英文:
I am creating a program which gives the user a set of grocery items for a shopping list and displays it. It then gives the user an input in the form of an html form. It must use that input to add to the list. My issue is that after I input a new value it gives the original list plus the new updated list.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
//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;
alert(blue)
if (blue === "") {
alert("Please enter a value if you wish to add something to your list.")
} else {
arr.push(blue);
console.log(arr)
arrayList(myArray)
}
}
<!-- language: lang-html -->
<!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>
<ul id="itemList">
<span value="\uOOD7" class="close">
</span>
</ul>
</div>
<script src="mainForTask2.js"></script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
在创建新列表之前，我们需要清空现有列表，所以使用 innerHTML 清空了列表，然后创建了新列表。
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");
// 这个函数将数组项添加到列表中
const arrayList = (arr) => {
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();
// 这个函数使用表单中的用户输入来添加项目到列表中
const updateList = (arr) => {
let blue = document.getElementById("input").value;
alert(blue);
if (blue === "") {
alert("如果您想要添加内容到您的列表，请输入一个值。");
} else {
arr.push(blue);
console.log(arr);
list1.innerHTML = ''; // 更改
arrayList(myArray);
idSelector(); // 更改
}
}
<div class="container">
<h2>购物清单</h2>
<div class="header">
<input type="text" id="input" placeholder="项目">
<span onclick="updateList(myArray)" id="addBtn"><button>添加项目</button></span>
</div>
<ul id="itemList">
<span value="" class="close">
</span>
</ul>
</div>
英文:
Before creating the new list we need to clear the existing list so using innerhtml we cleared the list and then created the new one.
<!-- 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"
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;
alert(blue)
if (blue === "") {
alert("Please enter a value if you wish to add something to your list.")
} else {
arr.push(blue);
console.log(arr)
list1.innerHTML=''; //Changes
arrayList(myArray)
idSelector() //Changes
}
}
<!-- language: lang-html -->
<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>
<ul id="itemList">
<span value="\uOOD7" class="close">
</span>
</ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论