变化会短暂地发生，然后消失。

问题描述 投票：0回答：1

我想在按下回车键时追加一个li，但是当我按下回车键时，新的li瞬间出现，然后消失。但是，当我按下回车键时，新的li瞬间出现，然后消失。怎样才能让它保存更改或如何修正代码？

var submitBtn = document.querySelector("input[type = 'submit'");
var enterTodo = document.querySelector("input[type = 'text']");
var todoList = document.querySelector("#todoList");

enterTodo.addEventListener('keydown', (event)=>{
    if(event.which == 13){
        var todo = enterTodo.value;
        todoList.append("<li>" + todo + "</li>");
    };
})
javascript keypress keydown
1个回答
0
投票

之所以显示出来又几乎马上消失，是因为表单在提交时自动刷新页面。这就是为什么要在onSubmit事件中使用preventDefault的原因。

我根据你的代码设置了两个工作示例。在这两个示例中，我都按照你的代码添加了适当的代码。li 元素，而不是文本 `<li>${todo}</li>` 到 todoList。我还让enterTodo在被添加到列表中后被清除。

  1. 这使用了你在keydown时的事件监听器的代码，但它防止了刷新。

var submitBtn = document.querySelector("input[type = 'submit'");
var enterTodo = document.querySelector("input[type = 'text']");
var todoList = document.querySelector("#todoList");
var form = document.querySelector("form");

form.onsubmit = (evt) => evt.preventDefault();

function addTodo() {
  var todo = enterTodo.value;
  var li = document.createElement('li');
  li.textContent = todo;
  todoList.appendChild(li);
  enterTodo.value = "";
}

enterTodo.addEventListener('keydown', (event) => {
  if (event.which == 13) {
    addTodo();
  };
})
<body>
  <form>
    <input type="text" onsubmit="" />
    <input type="submit" />
    <ul id="todoList"></ul>
  </form>
</body>
  1. 这使用from的onSubmit处理程序来执行添加到todoList，而不是直接处理文本输入中的回车键。这样做的另一个好处是也支持点击提交按钮。

var submitBtn = document.querySelector("input[type = 'submit'");
var enterTodo = document.querySelector("input[type = 'text']");
var todoList = document.querySelector("#todoList");
var form = document.querySelector("form");

function addTodo() {
  var todo = enterTodo.value;
  var li = document.createElement('li');
  li.textContent = todo;
  todoList.appendChild(li);
  enterTodo.value='';
}

form.onsubmit = (evt) => {evt.preventDefault();
addTodo();

}
<body>
  <form>
    <input type="text" onsubmit="" />
    <input type="submit" />
    <ul id="todoList"></ul>
  </form>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.