Javascript Uncaught TypeError: cancel不是一个函数

Question

我是JavaScript新手，尽管我定义了一个名为cancel的函数，我还是得到了未捕获的类型错误。我不明白为什么。函数在调用之前已定义。

function cancel(memberID){
document.getElementById(`remove_${memberID}`).style.display = "block";
document.getElementById(`edit_${memberID}`).style.display = "none";
}
document.addEventListener("DOMContentLoaded", function(){
const button = document.querySelectorAll("#edit_profile")
button.forEach(function(button){
button.onclick = function(){

const memberID = button.dataset.id;
const username = document.getElementById(`username_${memberID}`);
const skills = document.getElementById(`skills_${memberID}`);
const bio = document.getElementById(`bio_${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 cancel = document.createElement("button");
cancel.innerHTML = "Cancel";
cancel.className = "btn btn-danger col-3";
cancel.id = "cancel";
cancel.style.margin = "10px";
document.getElementById(`edit_${memberID}`).append(edit_username);
document.getElementById(`edit_${memberID}`).append(cancel);

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

Answer 1

通过创建具有相同名称的局部变量来隐藏cancel函数。给它一个不同的名字(例如，cancelButton)，你应该OK:

let cancelButton = document.createElement("button");
cancelButton.innerHTML = "Cancel";
cancelButton.className = "btn btn-danger col-3";
cancelButton.id = "cancel";
cancelButton.style.margin = "10px";