Javascript 函数仅在输入时运行！==无效的

我正在创建这个简单的待办事项列表。它工作正常，我只想添加一个条件，如果 因此，只有当输入中有文本时（如果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
}

//选择器
const todoInput=document.querySelector（'.todo input'）；
const todoButton=document.querySelector（'.todo btn'）；
const todoContainer=document.querySelector（'.todo container'）；
const todoList=document.querySelector（'.todo list'）；
//事件列表器
todoButton.addEventListener（'click'，addTodo）
//功能
函数addTodo（事件）{
//阻止表单提交
event.preventDefault（）；
//托多分区
const todoDiv=document.createElement（“div”）；
todoDiv.classList.add（“todo”）；
//创造李
const newTodo=document.createElement（“li”）；
newTodo.innerText=todoInput.value；
newTodo.classList.add（'todo-list'）；
托多迪夫·阿佩奇尔德（纽托多）；
//复选标记按钮
const completedButton=document.createElement（'button'）；
completedButton.innerHTML=''；
completedButton.classList.add（'complete-btn'）；
todoDiv.appendChild（completedButton）；
//垃圾箱按钮
const trashButton=document.createElement（'button'）；
trashButton.innerHTML=''；
trashButton.classList.add（'trash-btn'）；
todoDiv.appendChild（垃圾按钮）；
//A待处理事项清单
托多利斯特。阿佩奇尔德（托多迪夫）；
todoInput.value=null
}

---

我应该在哪里添加

if

语句，因为无论我将它放在哪里，它都会创建带有Li的div，并将其推送到屏幕上？

在

事件后的所有内容周围放置
if
语句。preventDefault（）

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

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 = ""
    }
}

函数addTodo（事件）{
//阻止表单提交
event.preventDefault（）；
if（todoInput.value！==“”）{
//托多分区
const todoDiv=document.createElement（“div”）；
todoDiv.classList.add（“todo”）；
//创造李
const newTodo=document.createElement（“li”）；
newTodo.innerText=todoInput.value；
newTodo.classList.add（'todo-list'）；
托多迪夫·阿佩奇尔德（纽托多）；
//复选标记按钮
const completedButton=document.createElement（'button'）；
completedButton.innerHTML=''；
completedButton.classList.add（'complete-btn'）；
todoDiv.appendChild（completedButton）；
//垃圾箱按钮
const trashButton=document.createElement（'button'）；
trashButton.innerHTML=''；
trashButton.classList.add（'trash-btn'）；
todoDiv.appendChild（垃圾按钮）；
//A待处理事项清单
托多利斯特。阿佩奇尔德（托多迪夫）；
todoInput.value=“”
}
}
您应该这样做

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

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

function addTodo(event){ 

   event.preventDefault();

   if (event.target.value === '')
     return;

  ...
  ...
}

我应该在哪里添加if语句，因为无论我把它放在哪里，它都会创建带有Li的div，并将其推到屏幕上。谢谢
值
从来都不是
空值
。如果用户没有输入任何内容，它将是一个空字符串
”
。将它放在整个函数体周围。如果（todoInput.value！==null）{function addTodo（event）{}像这样，它会在定义函数时检查值，而不是在函数运行时检查值。