Question

https://codepen.io/ardiandaffa/pen/yLOZGGa

代码：

function addProjectInit() {
    const modal = document.getElementById('modal');
    const addProjectButton = document.getElementById('add-btn');
    const span = document.getElementsByClassName('close')[0];

    addProjectButton.onclick = () => {
        modal.style.display = "block";
    }
    span.onclick = () => modal.style.display = "none";
    window.onclick = () => {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
};




function addProject() {
    const projectInputButton = document.getElementById('add-btn-modal');
    const labelProject = document.getElementById('project-label');
    const modal = document.getElementById('modal');

    projectInputButton.onclick = () => {
        let title = document.getElementById('project-title-input').value;
        labelProject.innerHTML += createProject(title);
        modal.style.display = "none";
    };
    
}

function createProject (project) {
    return `<option value="Default">${project}</option>`
}

function addTodo() {
    const todoTitle = document.getElementById('todo');
    const todoDate = document.getElementById('date');
    const todoPriority = document.getElementById('todo-priority');
    const todoButton = document.getElementById('todo-button');
    const todoBox = document.getElementById('todolist-box');   
    todoButton.addEventListener("click", () => {
        let todoObject = todoObj(todoTitle.value, todoDate.value, todoPriority.options[todoPriority.selectedIndex].value);
        todoBox.innerHTML += createTodolist(todoObject);
    });
};

const todoObj = (title, dueDate, priority) => {
    return {title, dueDate, priority};
};

function createTodolist (todoObject) {
    return `<div class="todo-table">
    <input type="checkbox" class="checkbox-todolist">
    <a class="title-todolist">${todoObject.title}</a>
    <a class="date-todolist">${todoObject.dueDate}</a>
    <a class="priority-todolist">${todoObject.priority}</a>
  </div>`
};

addProjectInit();
addProject();
addTodo();

因此，在上面的代码栏中，我可以单击“添加项目”按钮。但是，在添加待办事项并单击右侧的“添加”按钮后，“添加项目”按钮不起作用，并且模式也没有显示。为什么呢？

Answer 1

您直接添加了html，这将重置所有已注册的事件

 const todoBox = document.getElementById('todolist-box')
 todoBox.innerHTML += createTodolist(todoObject);

添加项目按钮在todoBox内部，因此只要您更改dom的内容，onClick事件就会重置

在周围创建另一个div并使用它来附加html

赞这个 https://codepen.io/stackoverflowuser/pen/xxVMMqy

单击其他按钮后，按钮事件侦听器未执行

1 个答案: