очистка текстового поля после нажатия клавиши ввода - PullRequest
Новая
       5

очистка текстового поля после нажатия клавиши ввода

0 голосов
/ 28 апреля 2018

Я пытался очистить текстовое поле после нажатия клавиши ввода, но я не смог найти никакого решения для этого, искал более 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();
        }

    });

1 Ответ

0 голосов
/ 28 апреля 2018

Нет элемента с идентификатором candidate в вашем 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('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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...