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>

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

2 个答案: