Eingabefeld keinen Wert Eingabe akzeptiert trotz if-Anweisung Validierung

Question

html:

<header> 
<h1>ENTER A TASK BELOW</h1> 
<input type="text" id="task"><img id="add" src="add.png"> 

</header> 


<div id="incomplete-tasks"> 
<h4>TO-DO LIST</h4> 
<ul id="task-to-do"> 

</ul> 
</div> 

Javascript/jquery:

$(document).ready(function() { 
    document.getElementById("add").addEventListener("click", function() { 
     var taskinput = document.getElementById("task").value; 
     if (taskinput) { 
      var tasktext = document.createTextNode(taskinput); 
      var list = document.createElement("li"); 
      list.appendChild(tasktext); 
      var button = document.createElement("button"); 
      button.setAttribute("class", "completed"); 
      button.innerHTML = "X"; 
      list.appendChild(button); 
      var toDoList = document.getElementById("task-to-do"); 
      toDoList.insertBefore(list, toDoList.childNodes[0]); 
      document.getElementById("task").value = " "; 
     } else { 
      alert("Please enter a task"); 
     } 
    }); 
    $(document).on('click', "button.completed", function() { 
     $(this).closest("li").remove(); 
    }); 
}); 

Dies ist eine einfache To-do-Liste an dem ich arbeite. Eines der Dinge, die ich eingerichtet habe, ist, dass eine Warnmeldung angezeigt wird, wenn der Benutzer auf das "Hinzufügen" -Bild klickt, ohne etwas in das Feld unter "Aufgabe eingeben" einzugeben.

Allerdings stimmt etwas nicht und der Benutzer kann leere Eingabewerte hinzufügen. Ich kann nicht sehen, was ich hier falsch mache. Bitte kann jemand assit? Danke vielmals!

Answer 1

Ich habe eine kleine Korrektur in Ihrem Javascript/jquery Code vorgenommen. In der if-Bedingung habe ich die trim() Methode hinzugefügt, um zu prüfen, ob es eine leere Zeichenfolge gibt.

$(document).ready(function() { 
 
    document.getElementById("add").addEventListener("click", function() { 
 
     var taskinput = document.getElementById("task").value; 
 

 
     if ($.trim(taskinput)!== '') { 
 
      var tasktext = document.createTextNode(taskinput); 
 
      var list = document.createElement("li"); 
 
      list.appendChild(tasktext); 
 
      var button = document.createElement("button"); 
 
      button.setAttribute("class", "completed"); 
 
      button.innerHTML = "X"; 
 
      list.appendChild(button); 
 
      var toDoList = document.getElementById("task-to-do"); 
 
      toDoList.insertBefore(list, toDoList.childNodes[0]); 
 
      document.getElementById("task").value = " "; 
 
     } else { 
 
      alert("Please enter a task"); 
 
     } 
 
    }); 
 
    $(document).on('click', "button.completed", function() { 
 
     $(this).closest("li").remove(); 
 
    }); 
 
});