点击事件绑定两个函数时出现classList未定义错误该如何解决？

你遇到的报错是因为在editNote函数中调用toggleEditMode时未传入必填的span、input参数，导致函数内部的span、input变量为undefined，访问undefined.classList就会触发你收到的类型错误。

• 逻辑冗余且方法误用：你不需要遍历整个数组修改对应项，你已经拿到了当前项的下标index，直接修改对应下标项即可；同时filter是用来过滤生成新数组的方法，不适合用来做遍历修改操作
• 无意义重复调用：原代码中只要不是当前匹配下标的数组项，都会触发一次无参的toggleEditMode调用，这是多余的错误逻辑
• DOM查询容错性低：连续多层parentElement的写法对DOM结构依赖性极强，只要结构稍有调整就会获取不到目标元素

1. 修复editNote函数逻辑 #

const editNote = (arr, index, span, input) => {
    // 直接修改对应下标的内容，不需要遍历整个数组
    if (input.value.trim() !== '') {
        arr[index].content = input.value;
    }
    // 传入参数调用切换方法
    toggleEditMode(span, input);
    showAllNotes(arr);
}

2. 可选优化：优化DOM查询逻辑 #

将事件监听内的DOM获取逻辑调整为按类名匹配，避免依赖DOM层级：

button.addEventListener('click', (e) => {
    // 替换下方的.note-item为你实际每条笔记外层容器的类名
    const noteItem = e.target.closest('.note-item');
    // 替换下方的类名为你实际span、input对应的类名
    const targetSpan = noteItem.querySelector('.content-span');
    const targetInput = noteItem.querySelector('.content-input');
    toggleEditMode(targetSpan, targetInput);
    editNote(arr, index, targetSpan, targetInput);
})

内容的提问来源于stack exchange，提问作者Murray11