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>