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

这是我正在处理的一个简单的待办事项列表。我所做的事情之一是，如果用户点击“添加”图像/按钮而不在“输入任务”下面的字段中输入任何内容，则会弹出一个警报框。

但是，出现了问题，它允许用户添加空输入值。我看不出我在这里做错了什么。请问有人可以帮忙吗？非常感谢!

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