[英]input field blank validation not working javascript
我正在制作一个待办事项列表,如果作为任务的输入字段为空白,则不应将其附加到任务列表中,即 addTask function 中的if (taskInput == "")
,但这并未反映在网站上. 有什么解决办法?
我的 JavaScript 代码:
var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
//New task list item
var createNewTaskElement=function(taskString){
var listItem=document.createElement("li");
//input (checkbox)
var checkBox=document.createElement("input");//checkbx
//label
var label=document.createElement("label");//label
//input (text)
var editInput=document.createElement("input");//text
//button.edit
var editButton=document.createElement("button");//edit button
//button.delete
var deleteButton=document.createElement("button");//delete button
label.innerText=taskString;
//Each elements, needs appending
checkBox.type="checkbox";
editInput.type="text";
editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
editButton.className="edit";
deleteButton.innerText="Delete";
deleteButton.className="delete";
//and appending.
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
var addTask=function(){
console.log("Add Task...");
//Create a new list item with the text from the #new-task:
var listItem=createNewTaskElement(taskInput.value);
//Append listItem to incompleteTaskHolder
if (taskInput == ""){
document.getElementById("warning").innerHTML = "Paragraph changed!";
}else{
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
taskInput.value="";
}
//Edit an existing task.
var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");
var listItem=this.parentNode;
var editInput=listItem.querySelector('input[type=text]');
var label=listItem.querySelector("label");
var containsClass=listItem.classList.contains("editMode");
//If class of the parent is .editmode
if(containsClass){
//switch to .editmode
//label becomes the inputs value.
label.innerText=editInput.value;
}else{
editInput.value=label.innerText;
}
//toggle .editmode on the parent.
listItem.classList.toggle("editMode");
}
//Delete task.
var deleteTask=function(){
console.log("Delete Task...");
var listItem=this.parentNode;
var ul=listItem.parentNode;
//Remove the parent list item from the ul.
ul.removeChild(listItem);
}
//Mark task completed
var taskCompleted=function(){
console.log("Complete Task...");
//Append the task list item to the #completed-tasks
var listItem=this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
}
var taskIncomplete=function(){
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incomplete-tasks.
var listItem=this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
}
var ar=function(){
console.log("Ar");
}
//The glue to hold it all together.
//Set the click handler to the addTask function.
addButton.onclick=addTask;
addButton.addEventListener("click",addTask);
addButton.addEventListener("click",ar);
var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
console.log("bind list item events");
//select ListItems children
var checkBox=taskListItem.querySelector("input[type=checkbox]");
var editButton=taskListItem.querySelector("button.edit");
var deleteButton=taskListItem.querySelector("button.delete");
//Bind editTask to edit button.
editButton.onclick=editTask;
//Bind deleteTask to delete button.
deleteButton.onclick=deleteTask;
//Bind taskCompleted to checkBoxEventHandler.
checkBox.onchange=checkBoxEventHandler;
}
//cycle over incompleteTaskHolder ul list items
//for each list item
for (var i=0; i<incompleteTaskHolder.children.length;i++){
//bind events to list items chldren(tasksCompleted)
bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
}
//cycle over completedTasksHolder ul list items
for (var i=0; i<completedTasksHolder.children.length;i++){
//bind events to list items chldren(tasksIncompleted)
bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
}
taskInput
是输入元素本身,因此您需要检查它的值:
//Append listItem to incompleteTaskHolder
if (taskInput.value == ""){
document.getElementById("warning").innerHTML = "Paragraph changed!";
} else {
document.getElementById("warning").innerHTML = ""; //Remove warning
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
此外,您设置了两次addTask
function 来处理onclick
事件:
//Set the click handler to the addTask function.
//addButton.onclick=addTask; <= remove this one
addButton.addEventListener("click",addTask);
由于第一次执行addTask()
会清除输入,因此在第二次运行时会显示警告。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.