函数仅在输入 ！== 空时运行

Question

我正在创建这个简单的待办事项列表。 它工作正常，我只想添加一个条件，如果 这样该函数只有在输入中有文本时才起作用(如果input.value ！== null(，否则它会将输入的边框更改为红色，.这里是JS代码

//Selectors
const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-btn');
const todoContainer = document.querySelector('.todo-container');
const todoList = document.querySelector('.todo-list');
//Event Listners
todoButton.addEventListener('click', addTodo)
//Functions
function addTodo(event){ 
//prevent form from submiting    
event.preventDefault();
// todo-div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
// creat li
const newTodo = document.createElement("li");
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-list');
todoDiv.appendChild(newTodo);
// check mark button
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add('complete-btn');
todoDiv.appendChild(completedButton);
// trash button
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add('trash-btn');
todoDiv.appendChild(trashButton);
// aapend to the to do list
todoList.appendChild(todoDiv);
todoInput.value = null
}

我应该在哪里添加if语句，因为无论我在哪里放置它，它都会创建包含 Li 的div 并将其推送到屏幕上？

Answer 1

如果值为空，只需退出函数而不执行任何操作。

function addTodo(event){ 
event.preventDefault();
if (event.target.value === '')
return;
...
...
}

Answer 2

将if语句放在event.preventDefault();之后的所有内容周围。

另外，与""进行比较，而不是null。value属性始终为字符串。

function addTodo(event){ 
//prevent form from submiting    
event.preventDefault();
if (todoInput.value !== "") {
// todo-div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
// creat li
const newTodo = document.createElement("li");
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-list');
todoDiv.appendChild(newTodo);
// check mark button
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add('complete-btn');
todoDiv.appendChild(completedButton);
// trash button
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add('trash-btn');
todoDiv.appendChild(trashButton);
// aapend to the to do list
todoList.appendChild(todoDiv);
todoInput.value = ""
}
}

Answer 3

你应该做这样的事情

function addTodo(event) { 
//prevent form from submiting    
event.preventDefault();
if (!todoInput.value) {
todoInput.classList.add('class-of-red-border');
} else {
// Your code
}
}

此外，您可能希望在用户尝试输入内容时删除红边框

所以也添加此代码

todoButton.addEventListener('keyup', () => {
if (todoInput.value.length) {
todoInput.classList.remove('class-of-red-border');
} else {
todoInput.classList.add('class-of-red-border');
}
})