added EventListener on input, but when pressing "Enter", the input value is cleared. Why?

Viewed 29

I added an EventListener to my input, but when I press the Enter key, the input value is cleared. Why?

This is the relevant JS:

document.querySelector("#txtTaskName").addEventListener("keypress", function () {
  let anahtarDeger = event.key;
  if (anahtarDeger == "Enter") {
    console.log(document.querySelector("#txtTaskName"));
    document.querySelector("#btnAddNewTask").click();
  }
});

But the input value gets cleared when the Enter key is pressed.

Here is my full code (HTML + JS):

      let sonuc;

        let gorevListesi = [
            {"id": 1, "gorevAdi": "Görev 1"},
            {"id": 2, "gorevAdi": "Görev 2"},
            {"id": 3, "gorevAdi": "Görev 3"},
            {"id": 4, "gorevAdi": "Görev 4"},
        ];
        
        let ul = document.getElementById("task-list");
        displayTasks();

        function displayTasks(){
              ul.innerHTML = "";
              for(let gorev of gorevListesi) {
                let li = `
                <li class="task list-group-item">
                <div class="form-check">
                    <input type="checkbox" id="${gorev.id}" class="form-check-input">
                    <label for="${gorev.id}" class="form-check-label">${gorev.gorevAdi}</label>
                </div>
                </li>
                `;
                ul.insertAdjacentHTML("beforehand", li);           
              }
        }

document.querySelector("#btnAddNewTask").addEventListener("click", newTask);

function newTask(event) {
    event.preventDefault();
    let taskInput = document.querySelector("#txtTaskName");

    if (taskInput.value == "") {
      alert("bir değer girmediniz");
    } else { 
      gorevListesi.push({"id": gorevListesi.length, "gorevAdi": taskInput.value});
      displayTasks(); 
      taskInput.value = "";
    }
}

document.querySelector("#txtTaskName").addEventListener("keypress",function () {
    let anahtarDeger = event.key;
    if (anahtarDeger == "Enter") {
        console.log(document.querySelector("#txtTaskName"));
        document.querySelector("#btnAddNewTask").click();
    }
});
 <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        Todo App 
                    </div>
                </div>
                <div class="card-body">
                    <form >
                        <div class="input-group">
                            <input type="text" id="txtTaskName" class="form-control">    
                            <button type="sumbit" class="btn btn-primary" id="btnAddNewTask">Ekle</button>
                        </div>
                    </form>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <button id="btnClear"type="button" class="btn btn-danger btn-dm float-end">Temizle</button>
                    </div>
                    <ul id="task-list" class="list-group list-group-flush">
                    </ul>
                </div>
            </div>
        </div>
    </div>

0 Answers
Related