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

这是我正在处理的简单待办事项清单。我已经实施的一项措施是，如果用户点击＆＃34;添加＆＃34;图像/按钮没有在下面的字段中输入任何内容＆＃34;输入任务＆＃34;。

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

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

如果语句验证，则输入字段不接受任何值输入

1 个答案: