如何验证输入值是否确实存在？

Question

我想检查输入的值是否已经在待办事项列表中？并且不要添加与其中一个任务具有相同内容的另一个任务，而是添加一个甜蜜的警报（在评论中）。剩下的代码是这样的：https://www.w3schools.com/howto/howto_js_todolist.asp

let theinput = document.querySelector(".add-task input");
let theaddbutton = document.querySelector(".add-task .plus");
let taskscontainer = document.querySelector(".tasks-content");
let taskscount = document.querySelector(".tasks-count span");
let taskscompleted = document.querySelector(".tasks-completed span");


window.onload = () => {
  theinput.focus();
};
theaddbutton.onclick = () => {
  if (theinput.value === '') {
    Swal.fire("you should type something");
  }
  /*if (theinput.value === document.querySelector(".task-box").textContent) {
      swal.fire("You have already added this task")
  } */
  else {
    let notasks = document.querySelector(".no-tasks");
    if (document.body.contains(document.querySelector(".no-tasks"))) {
      notasks.remove();
    }
    let mainspan = document.createElement('span');
    let deletespan = document.createElement('span');
    let text = document.createTextNode(theinput.value);
    let deletetext = document.createTextNode("delete");

    mainspan.appendChild(text);
    mainspan.className = 'task-box';

    deletespan.appendChild(deletetext);
    deletespan.className = 'delete';

    mainspan.appendChild(deletespan);
    taskscontainer.appendChild(mainspan);

    theinput.value = '';
    calctasks();
  }
};

Answer 1

我找到了我的问题的解决方案，所以我想在这里分享它，也许它会有用。

不知道代码合不合逻辑（因为我是初学者）

我对数组进行了循环并减去 1，因此它不会检查新值。

无论如何，这是代码：

    // the array of todos
    var todos = [];
    // Fetch items from local storage
    if (localStorage.getItem("task")) {
        todos = JSON.parse(localStorage.getItem("task"));
    }
    getlocalstorage();

    window.onload = () => { theinput.focus(); };
    //add tasks
    if (taskscontainer.innerHTML == "") {
        // Show no tasks message
        notasksfunction();
    }

    theaddbutton.onclick = () => {
        if ( theinput.value === '' ) {Swal.fire("you should type something");}

        else {
            
            addtodo(theinput.value);

            // this is the function which checks the todos 
            checking();
            function checking() {
                //
                for (let i = 0; i < todos.length -1 ; i++) {
                    
                    if (theinput.value === todos[i].title ) {
                        Swal.fire(`You've already added this task`);
                    } 
                }
            }

            theinput.value = '';
            theinput.focus();

        }
    } ;
    document.addEventListener('click' , function (e) {
        if (e.target.className === "delete") {
            deletestorage(e.target.parentNode.getAttribute('data-id'));

            e.target.parentNode.remove();
            
            if (taskscontainer.childElementCount == 0 ) {
                notasksfunction();
            }
        };
        if (e.target.classList.contains('task-box')) {
            
            isitcompleted(e.target.getAttribute("data-id"));
            e.target.classList.toggle('finish');
            
            localstorage(todos);
        };
        if (e.target.className === "deleteall") {
            taskscontainer.innerHTML = "";
            todos = [];localstorage(todos);
            notasksfunction();

        }
        
        calctasks();
    })
    //functions
    function addtodo(text) {
        //task data
        const  task = {
            id: Date.now(),
            title: text,
            completed: false,
        }
        todos.push(task);

        addelements(todos);
        localstorage(todos);
        
    }
    function addelements(todos) {
        // remove the notasks div
        taskscontainer.innerHTML = '';
        
        todos.forEach(task => {
            
            let todo = document.createElement('div');
            todo.className = 'task-box';

            if (task.completed) {todo.className = 'task-box finish';}

            let text = document.createTextNode(task.title);
            todo.setAttribute("data-id", task.id);
            todo.appendChild(text);

            let deletespan = document.createElement('span');
            let deletetext = document.createTextNode("delete");

            deletespan.appendChild(deletetext);
            deletespan.className = 'delete';

            todo.appendChild(deletespan);
            taskscontainer.appendChild(todo);
            
            calctasks()
        } );

    }

如何验证输入值是否确实存在？

How do I verify that the input value actually exists?

html

javascript

sweetalert