我正在学习一个教程，它工作得很好，它可以按Enter提交。不知何故，如果我添加一个提交按钮，它会通过仅添加一项并替换输入的最后一项来打破它。如何同时使用“提交”按钮和输入按钮？
这是一个有效的示例：
https://codepen.io/sergestra/pen/WNeVEVE
（（我已经将提交按钮放在html注释中，取消注释就看不到我的问题。）
const form = document.querySelector('form');
const ul = document.querySelector('ul');
const button = document.querySelector('button');
const input = document.getElementById('item');
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];
localStorage.setItem('items', JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem('items'));
const liMaker = (text) => {
const li = document.createElement('li');
li.textContent = text;
ul.appendChild(li);
}
form.addEventListener('submit', function (e) {
e.preventDefault();
itemsArray.push(input.value);
localStorage.setItem('items', JSON.stringify(itemsArray));
liMaker(input.value);
input.value = "";
});
data.forEach(item => {
liMaker(item);
});
button.addEventListener('click', function () {
localStorage.clear();
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
itemsArray = [];
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Tab App</title>
<link rel="stylesheet" href="css/primitive.css">
</head>
<body>
<div class="small-container">
<h1>New Tab App</h1>
<form>
<input id="item" type="text" placeholder="New">
<button>save note</button>
</form>
<h2>Items</h2>
<ul></ul>
<button>Clear All</button>
</div>
<script src="js/scripts.js"></script>
</body>
</html>您的问题原因：
这是因为在您的JavaScript中，您插入的button（以及“清除按钮”）上都有一个事件监听器。当您单击插入的button时，以下部分将导致删除：
button.addEventListener('click', function () {
localStorage.clear();
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
itemsArray = [];
});
一种解决方法：
您可以给“清除按钮”一个特定的ID，并在JavaScript中引用该ID以将click-function（从上面粘贴）到：
以下是我的作品：
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Tab App</title>
<link rel="stylesheet" href="css/primitive.css">
</head>
<body>
<div class="small-container">
<h1>New Tab App</h1>
<form>
<input id="item" type="text" placeholder="New">
<button>save note</button>
</form>
<h2>Items</h2>
<ul></ul>
<button id="buttonClear">Clear All</button>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
JavaScript的：
const form = document.querySelector('form');
const ul = document.querySelector('ul');
const button = document.querySelector('button');
const input = document.getElementById('item');
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];
localStorage.setItem('items', JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem('items'));
const liMaker = (text) => {
const li = document.createElement('li');
li.textContent = text;
ul.appendChild(li);
}
form.addEventListener('submit', function (e) {
e.preventDefault();
itemsArray.push(input.value);
localStorage.setItem('items', JSON.stringify(itemsArray));
liMaker(input.value);
input.value = "";
});
data.forEach(item => {
liMaker(item);
});
clearbutton = document.getElementById("buttonClear");
clearbutton.addEventListener('click', function () {
localStorage.clear();
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
itemsArray = [];
});