时间戳

首页 > 解决方案 > 在表单上按 enter 提交我的输入文本，如果我添加提交按钮它只会刷新页面

javascript - 在表单上按 enter 提交我的输入文本，如果我添加提交按钮它只会刷新页面

问题描述

我正在学习一个教程，它工作得很好，它通过按 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>

标签： javascripthtmlformsform-submit

解决方案

您的问题的原因：

这是因为在您的 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 = [];
});

推荐阅读