Javascript, keypress if i use it when i want user input to be added in a list only one character i.e., the latest pressed key shows up

Question

i wanted to add a userinput in a todo list using keypress but only one character is taken by the input filed.

this is the code:

input.addEventListener("keypress", function(event){
    
    if(input.value.length>0 && event.key === 'Enter'){
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    } else input.value = "";

i tried using keyup but using Keyup does not take any input rather it just show the input for an instance but then the input filed deletes it automatically

Answer 1

Try putting input.value = ""; inside the conditional code that creates a new list item:

const input = document.querySelector("input");
const ul = document.querySelector("ul");

input.addEventListener("keypress", function(event){
    
    if(input.value.length>0 && event.key === 'Enter'){
      var li = document.createElement("li");
      li.appendChild(document.createTextNode(input.value));
      ul.appendChild(li);
      input.value = ""; // it's now in the li.
  }
});

Type in  to do text and press Enter: <input type="text">
<p>
<ul></ul>

At the moment clearing the input element's content is in the wrong spot - the code needs to allow the user to enter to do information without erasing it!

Answer 2

Keypress event won't work for you in this case. The key press will always take one character only. either switch to press enter key to submit the input text value or add a button next to input field to click. So that the value gets added to your todo list.

Refer the below code sample:

var taskInput = document.getElementById('newTask');
var addTaskButton = document.getElementById('addTaskButton');
var incompleteTasks = document.getElementById('toDo');
var completedTask = document.getElementById('completedTasks');

var addTask = function () {
    var text = taskInput.value;
    var li = document.createElement('li');
    li.innerHTML = "<input type='checkbox'>" +
                   "<label>" + text + "</label>" + 
                   "<button class='delete'>Delete</button>";
    incompleteTasks.appendChild(li);
}

addTaskButton.onclick = addTask;

    <input id='newTask' type='text'>
    <button id='addTaskButton'>Add</button>
    
<h3> To-Do </h3>

    <ul id='toDo'>
        <li>
            <input type='checkbox'> <label>item1</label>
            <button class='delete'>Delete</button>
        </li>
    </ul>
    
<h3> Completed </h3> 
    <ul id='completedTasks'>
        <li>
            <input type='checkbox' checked>
            <label>Buy Peanut Butter</label>
            <button class='delete'>Delete</button>
        </li>
    </ul>
</div>

Using enter key :

var listLis=document.getElementById('list');
const addbutton=document.querySelector('.fa-plus')
const inputBar=document.querySelector('.show')
const delAll = document.querySelector('.deleteAll')


const input = document.querySelector("input");
const ul = document.querySelector("ul");

input.addEventListener("keypress", function(event){
    
    if(input.value.length>0 && event.key === 'Enter'){
      var li = document.createElement("li");
      li.appendChild(document.createTextNode(input.value));
      ul.appendChild(li);
      input.value = "";
  }
});

Add to ToDo <input type="text"> press enter to submit
<p>
<ul></ul>

Answer 3

Please replace the code with following one. You were facing the mentioned issue due to else part. You are making the value blank of input in else when key press is not a Enter key. so the value become blank. Instead of blank the value in else we need to do it in If condition when we done with creating the list. In end of if condition we can do this.

    let input = document.querySelector('input')
    let ul = document.querySelector('ul')
    input.addEventListener("keypress", function(event){
    
    if(input.value.length>0 && event.key === 'Enter'){
      console.log('input value', input.value)
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = ""
    }
})

I hope this may help you.

Answer 4

You can actually use keypress event however you just can't use it the way you're using it because your else statement is catching every keypress that is not the key Enter you can either remove the else statement or make it catch something specific

Here is an example:

const input = document.querySelector(".input");
const list = document.querySelector(".todo-list")

const createTodoItem = input => {
  const li = document.createElement("li");
  li.innerText = input;
  list.appendChild(li);
}

input.addEventListener("keypress", e => {
  if (input.value !== "" && event.key === 'Enter') {
    createTodoItem(input.value)
    input.value = ""
  }

})

<input type="text" class="input">
<ul class="todo-list"></ul>