Question

所以，我正在使用待办事项列表api构建一个基本待办事项列表应用程序，并且我无法确定如何在用户单击删除按钮时删除一个待办事项。我正在使用为新todo创建的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);
});

Answer 1

the docs来自'submit'事件：

请注意，在表单元素上触发仅，而不是按钮或提交输入。（提交表格，而不是按钮。）

至于您的范围问题，如果您将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);
});

如何使用Axios一次执行一项删除请求？

1 个答案: