JavaScript报错Uncaught TypeError: cancel is not a function求助

问题根源 #

你定义的全局cancel函数被内部作用域的同名变量覆盖了。在按钮点击的回调函数里，你用let cancel = document.createElement("button")声明了一个DOM元素变量，这个变量会在当前作用域（按钮点击的函数内部）优先生效。当你在cancel按钮的点击事件里调用cancel(memberID)时，这里的cancel指向的是你刚创建的按钮元素，而非全局的cancel函数，所以会触发"not a function"的类型错误。

修复方案 #

方案1：修改内部变量名（推荐）

把创建按钮的变量名改成和全局函数不冲突的名称，比如cancelBtn：

function cancel(memberID){
    document.getElementById(`remove_${memberID}`).style.display = "block";
    document.getElementById(`edit_${memberID}`).style.display = "none";
}

document.addEventListener("DOMContentLoaded", function(){
    const buttons = document.querySelectorAll("#edit_profile")
    buttons.forEach(function(button){
        button.onclick = function(){
            const memberID = button.dataset.id;
            const username = document.getElementById(`username_${memberID}`);
            
            let edit_username = document.createElement("input");
            edit_username.setAttribute("type", "text");
            edit_username.setAttribute("value", username.innerHTML);
            edit_username.id = "edit_username";
            edit_username.className = `form-control username ${usernameID}`;
        
            // 修改变量名避免冲突
            let cancelBtn = document.createElement("button");
            cancelBtn.innerHTML = "Cancel";
            cancelBtn.className = "btn btn-danger col-3";
            cancelBtn.style.margin = "10px";

            document.getElementById(`edit_${memberID}`).append(edit_username);
            document.getElementById(`edit_${memberID}`).append(cancelBtn);
        
            // 直接给按钮绑定点击事件，不用通过id查找
            cancelBtn.onclick = function(){
                cancel(memberID)
            }
        }
    })
})

方案2：明确调用全局函数

如果不想修改变量名，可以通过window.cancel直接指定调用全局作用域的函数：

document.querySelector("#cancel").onclick = function(){
    window.cancel(memberID)
}

额外优化提示 #

不要给多个元素设置相同的id="cancel"，当页面存在多个编辑按钮时，document.querySelector("#cancel")只会选中第一个匹配的元素，导致后续的cancel按钮无法正常工作。推荐直接在创建按钮时绑定点击事件（如方案1所示），避免依赖重复id。

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