Javascript Uncaught TypeError: cancel is not a function

I’m new to JavaScript and even though I defined a function called cancel, I get the uncaught type error. Couldn’t understand why. The function was defined before it was called.

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.onclick = function(){
            const memberID =;
            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";
            edit_username.className = `form-control username ${usernameID}`;

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

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

>Solution :

You’re hiding the cancel function by creating a local variable with the same name. Give it a different name (e.g., cancelButton) and you should be OK:

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

Leave a Reply