How do I clear the input field after I press enter?

Question

I have this section of code for a todo list and when I press Enter I want to clear the text in the input field. Any idea how to do this?

document.addEventListener("keyup", function (event) {
    if (event.key === 'Enter') {
        var inputText = document.getElementById("the-input").value;
        var node = document.createElement("li");
        var textnode = document.createTextNode(`•${inputText}`);
        node.appendChild(textnode);
        document.getElementById("list").appendChild(node);
    }
});

score 1 · Answer 1 · answered Aug 26 '21 at 21:26

Set its value property to "" in your keup event listener:

document.addEventListener("keyup", function(event) {
  if (event.key === 'Enter') {
    var input = document.getElementById("the-input")
    var inputText = input.value;
    input.value = "";
    var node = document.createElement("li");
    var textnode = document.createTextNode(`•${inputText}`);
    node.appendChild(textnode);
    document.getElementById("list").appendChild(node);
  }
});

<input id="the-input">

<ul id="list"></ul>

How do I clear the input field after I press enter?

1 Answers1