确认删除警报代码不太正确

Question

我正在 JS 中创建一个简单的待办事项应用程序，并且我添加了一个警告框以在 usr 单击删除按钮时确认删除。如果用户单击“确定”，则删除正常，如果单击“取消”，则不会删除，但会创建另一个空 li标签在它下面。

我的 deleteItem 函数有些地方不太对劲，但我不知道是什么，尝试添加 else 语句时会发生同样的事情。任何有关解释的帮助将不胜感激（如您所知，我是 JS 中的菜鸟）。谢谢！

//grab form id first
let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let OurList = document.getElementById("ourList");

 //on submit event from user, do something
ourForm.addEventListener("submit", (e) =>{
  //will prevent alert appearing on any click event around form, ONLY when submit button is clicked.
    e.preventDefault();
    //access value of user input as a test
    //console.log(ourField.value);

  //now on submit we're gonna pass the function below which is created further down and takes one argument and its value:
    if(ourField.value === ""){
      alert("Please add a task")
    }else{
      createItem(ourField.value);
    }
})

function createItem(item) {
    let createdHTML = `<li>${item} <button 
    onclick="deleteItem(this)">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", createdHTML);

  //clear the inpur field value after user input:
    ourField.value = "";

  //keep field focused after clearing 
    ourField.focus();
}

function deleteItem(itemToDelete){
    //create alert
    let result = confirm("Are you sure you want to delete?");
    if (result === true) {
    //Logic to delete the item
    itemToDelete.parentElement.remove();
    ourField.focus();
  }
}

<h1> Todo App</h1>
<form id="ourForm">
  <input id = "ourField" type="text" autocomplete="off">
  <button> Create item</button>

  <h3>To do tasks:</h3>
  <ul id="ourList">
  </ul>

Answer 1

您需要更改的是：将列表项的按钮设为button 类型。按钮的默认值type 是submit，它将提交整个表单，这将触发您的问题。

//grab form id first
let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let OurList = document.getElementById("ourList");

 //on submit event from user, do something
ourForm.addEventListener("submit", (e) =>{
  //will prevent alert appearing on any click event around form, ONLY when submit button is clicked.
    e.preventDefault();
    //access value of user input as a test
    //console.log(ourField.value);

  //now on submit we're gonna pass the function below which is created further down and takes one argument and its value:
    if(ourField.value === ""){
      alert("Please add a task")
    }else{
      createItem(ourField.value);
    }
})

function createItem(item) {
    let createdHTML = `<li>${item} <button 
    onclick="deleteItem(this)" type="button">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", createdHTML);

  //clear the inpur field value after user input:
    ourField.value = "";

  //keep field focused after clearing 
    ourField.focus();
}

function deleteItem(itemToDelete){
    //create alert
    let result = confirm("Are you sure you want to delete?");
    if (result === true) {
    //Logic to delete the item
    itemToDelete.parentElement.remove();
    ourField.focus();
  }
}

<h1> Todo App</h1>
<form id="ourForm">
  <input id = "ourField" type="text" autocomplete="off">
  <button> Create item</button>

  <h3>To do tasks:</h3>
  <ul id="ourList">
  </ul>

Answer 2

您忘记关闭按钮后的form 标记，结果您的ourForm 侦听器即使在确认框内也会被调用。

//grab form id first
let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let OurList = document.getElementById("ourList");

 //on submit event from user, do something
ourForm.addEventListener("submit", (e) =>{
  //will prevent alert appearing on any click event around form, ONLY when submit button is clicked.
    e.preventDefault();
    //access value of user input as a test
    //console.log(ourField.value);

  //now on submit we're gonna pass the function below which is created further down and takes one argument and its value:
    if(ourField.value === ""){
      alert("Please add a task")
    }else{
      createItem(ourField.value);
    }
})

function createItem(item) {
    let createdHTML = `<li>${item} <button 
    onclick="deleteItem(this)">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", createdHTML);

  //clear the inpur field value after user input:
    ourField.value = "";

  //keep field focused after clearing 
    ourField.focus();
}

function deleteItem(itemToDelete){
    //create alert
    let result = confirm("Are you sure you want to delete?");
    if (result === true) {
    //Logic to delete the item
    itemToDelete.parentElement.remove();
    ourField.focus();
  }
}

<h1> Todo App</h1>
<form id="ourForm">
  <input id = "ourField" type="text" autocomplete="off">
  <button> Create item</button>
</form>

  <h3>To do tasks:</h3>
  <ul id="ourList">
  </ul>