按回车键后清除文本框答案

【问题标题】：clearing the text box after pressing enter key按回车键后清除文本框
【发布时间】：2018-04-28 12:56:23
【问题描述】：

我一直试图在按下回车键后清除文本框，但我找不到任何解决方案，已经搜索了 2 个多小时.. 这是代码：

html:

<!DOCTYPE html>
<html>
<body>
<style>
input{
margin-top:300px;
margin-left:580px;
}
ul{
margin-left:580px;
}
</style>
<input type="text" id="textBox" value = "" />
<ul id="dynamic-list"></ul>

<script src="script.js"></script>
</body>
</html>

javascript：

 function addItem(){
        var ul = document.getElementById("dynamic-list");
        var candidate = document.getElementById("textBox");
        var li = document.createElement("li");
        li.setAttribute('id',candidate.value);
        li.appendChild(document.createTextNode(candidate.value));
        ul.appendChild(li);
        document.getElementById('candidate').value = "";
        document.getElementById('textBox').value = "";
    }
    var input = document.getElementById("textBox");
    input.addEventListener("keyup", function(event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            addItem();
        }

    });

【问题讨论】：

标签： javascript html css input text

【解决方案1】：

您的 HTML 代码中没有 ID 为 candidate 的元素。因此 JavaScript 抛出错误并停止执行下一条语句。这就是文本框不清理的原因。

删除错误语句，您的代码就可以正常工作了：

function addItem() {
  var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementById("textBox");
  var li = document.createElement("li");
  li.setAttribute('id', candidate.value);
  li.appendChild(document.createTextNode(candidate.value));
  ul.appendChild(li);
  document.getElementById('textBox').value = "";
}
var input = document.getElementById("textBox");
input.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    addItem();
  }

});

<input type="text" id="textBox" value="" />
<ul id="dynamic-list"></ul>

【讨论】：