入力フィールドにもかかわらず、if文の検証

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(); 
    }); 
}); 

これは私が働いているシンプルなto-doリストがあります。私が配置したことの1つは、ユーザーが「タスクを入力」の下のフィールドに何も入力せずに「追加」画像/ボタンを押すと警告ボックスがポップアップすることです。

しかし、何かが間違っていて、ユーザーが空の入力値を追加できるようになっています。ここで間違っていることは私には分かりません。誰か助けてもらえますか？どうもありがとう！

Answer 1

javascript/jqueryコードで小さな修正を行いました。if条件で空文字列があるかどうかを確認するためにtrim()メソッドを追加しました。

$(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(); 
 
    }); 
 
});