Javascript 按表单上的enter键提交我的输入文本，若我添加submit按钮，它只刷新页面
我正在遵循一个教程，它工作得非常好，它通过按enter键提交。不知何故，如果我添加一个提交按钮，它只会添加一个项目并替换最后一个输入的项目，从而破坏它。如何使用submit按钮和enter键 下面是一个工作示例： （我已将提交按钮放在html注释中，取消注释以查看我的问题。）Javascript 按表单上的enter键提交我的输入文本，若我添加submit按钮，它只刷新页面,javascript,html,forms,form-submit,Javascript,Html,Forms,Form Submit,我正在遵循一个教程，它工作得非常好，它通过按enter键提交。不知何故，如果我添加一个提交按钮，它只会添加一个项目并替换最后一个输入的项目，从而破坏它。如何使用submit按钮和enter键 下面是一个工作示例： （我已将提交按钮放在html注释中，取消注释以查看我的问题。） const form=document.querySelector（'form'）； const ul=document.querySelector（'ul'）； const button=document.query
const form=document.querySelector（'form'）；
const ul=document.querySelector（'ul'）；
const button=document.querySelector（'button'）；
常量输入=document.getElementById（'item'）；
让itemsArray=localStorage.getItem（'items'）？parse（localStorage.getItem（'items'））：[]；
setItem（'items'，JSON.stringify（itemsArray））；
const data=JSON.parse（localStorage.getItem（'items'）；
const liMaker=（文本）=>{
const li=document.createElement（'li'）；
li.textContent=文本；
ul.儿童（li）；
}
表.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
itemsArray.push（输入值）；
setItem（'items'，JSON.stringify（itemsArray））；
liMaker（输入值）；
input.value=“”；
});
data.forEach（项=>{
石灰机（项目）；
});
按钮。addEventListener（'click'，函数（）{
localStorage.clear（）；
而（ul.第一个孩子）{
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 id="buttonClear">Clear All</button>
</div>
<script src="js/scripts.js"></script>
</body>
</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);
});
clearbutton = document.getElementById("buttonClear");
clearbutton.addEventListener('click', function () {
localStorage.clear();
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
itemsArray = [];
});
这是因为在JavaScript中，有一个事件侦听器粘贴到插入的按钮（以及“清除按钮”）上。单击插入的按钮时，以下部分会导致删除：
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 id="buttonClear">Clear All</button>
</div>
<script src="js/scripts.js"></script>
</body>
</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);
});
clearbutton = document.getElementById("buttonClear");
clearbutton.addEventListener('click', function () {
localStorage.clear();
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
itemsArray = [];
});
您可以为“Clear button”（清除按钮）指定一个特定的ID，并在JavaScript中引用该ID，以将单击-功能（从上面）粘贴到：
以下是我的作品：
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>
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 = [];
});
按钮始终需要定义类型
。如果没有，则默认类型为submit
。这可能是你的问题。对于您的用例，您可能希望使用type=“reset”