因此,我正在使用待办事项列表 API 构建一个基本的待办事项列表应用程序,但我无法弄清楚如何在用户单击删除按钮时一次删除一个待办事项。我正在使用为新待办事项创建的 id#。

我认为我当前的代码可以工作,但是当我单击删除按钮时没有任何反应。

对我做错了什么有什么见解吗?

这是我的所有 JavaScript,但我遇到问题的是代码底部的最后一个 addEventListener:

function Todo(title, description, price){ 
    this.title = title; 
    this.description = description; 
    this.price = price; 
} 
 
document.todo.addEventListener("submit", function(e){ 
    e.preventDefault(); 
    var titleForm = document.todo.title.value; 
    var descriptionForm = document.todo.description.value; 
    var priceForm = document.todo.price.value; 
    var newTodo = new Todo(titleForm, descriptionForm, priceForm); 
 
    axios.post("https://api.todo.io/name/todo", newTodo).then(function(response){ 
    console.log(response.data); 
}) 
}) 
 
axios.get("https://api.todo.io/name/todo").then(function(response){ 
    for(var i = 0; i < response.data.length; i++){ 
        var h1 = document.createElement("h1"); 
        var h3 = document.createElement("h3"); 
        var h3Price = document.createElement("h3"); 
        var div = document.createElement("div"); 
        var delButton = document.createElement("button"); 
 
        var displaytitle = document.createTextNode(`Title: ${response.data[i].title}`); 
        var displayDescription = document.createTextNode(`Description: ${response.data[i].description}`); 
        var displayPrice = document.createTextNode(`Price: ${response.data[i].price}`); 
        var displayButton = document.createTextNode("Delete"); 
 
        h1.appendChild(displaytitle); 
        h3.appendChild(displayDescription); 
        h3Price.appendChild(displayPrice); 
        delButton.appendChild(displayButton); 
 
        div.appendChild(h1); 
        div.appendChild(h3); 
        div.appendChild(h3Price); 
        div.appendChild(delButton); 
 
 
        document.body.appendChild(div); 
 
           delButton.addEventListener("submit", function(e){ 
               e.preventDefault(); 
               axios.delete(`https://api.todo.io/name/todo/${response.data[i]._id}`).then(function(response){ 
                console.log("Todo Deleted!"); 
            }) 
           })   
        } 
    console.log(response.data); 
}); 

请您参考如下方法:

来自the docs对于'submit'事件:

Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)

至于您的范围问题,如果您将 for 循环的主体提取为函数:

function addTodo({ _id, description, price, title }) { 
    const h1 = document.createElement("h1"); 
    const displaytitle = document.createTextNode(`Title: ${title}`); 
    h1.appendChild(displaytitle); 
 
    const h3 = document.createElement("h3"); 
    const displayDescription = document.createTextNode(`Description: ${description}`); 
    h3.appendChild(displayDescription); 
 
    const h3Price = document.createElement("h3"); 
    const displayPrice = document.createTextNode(`Price: ${price}`); 
    h3Price.appendChild(displayPrice); 
 
    const delButton = document.createElement("button"); 
    const displayButton = document.createTextNode("Delete"); 
    delButton.appendChild(displayButton); 
    delButton.addEventListener("click", function(e) { 
        e.preventDefault(); 
 
        axios 
          .delete(`https://api.todo.io/name/todo/${_id}`) 
          .then(function(response) { 
            console.log("Todo Deleted!"); 
          }); 
    }); 
 
    const div = document.createElement("div"); 
    div.appendChild(h1); 
    div.appendChild(h3); 
    div.appendChild(h3Price); 
    div.appendChild(delButton); 
 
    document.body.appendChild(div); 
} 
 
axios.get("https://api.todo.io/name/todo").then(function(response) { 
    for (var i = 0; i < response.data.length; i++) { 
        addTodo(response.data[i]); 
    } 
    console.log(response.data); 
}); 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!