second time function not calling

Question

when i call Javascript function first time it work properly but second time it get error like

Uncaught TypeError: profile is not a function at HTMLImageElement.onclick

why it happening?

try to write function in head section of html as well as js file but didn't working!

    function profile_detail(){

    xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost/CI-social-media/index.php/profile_detail", false);

    xhr.onload = () => {
        if (xhr.status == 200) {

        if (xhr.response) {
            profile = JSON.parse(xhr.responseText);
            // console.log(xhr.response);
            console.log(xhr.response);
            console.log(profile);

                // document.getElementById("profile_photo").innerHTML =xhr.response;
                document.getElementById("profile_photo").src = profile[0]["profile"];
                document.getElementById("profile_name").innerHTML = profile[0]["display_name"];
                document.getElementById("username").innerHTML = "@"+ profile[0]["user_name"];
                
            }
            else {
                alert("something want wrong try agin later")
            }
        }
        else {
            alert("Something Want Wrong Try agin");
        }
    }

    xhr.send();
}

function profile(){

    document.getElementById("request").style.display="none";
    document.getElementById("friend_list").style.display="none";
    document.getElementById("msg_section").style.display="none";
    document.getElementById("friend_search").style.display="none";
    document.getElementById("home_mains").style.display="none";
    document.getElementById("search_friend_main").style.display="none";
    document.getElementById("search1").style.display="none";
    document.getElementById("rrprofile-card").style.display="flex";
    profile_detail();
    
    
}

Please add a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) for the issue that you are facing. — Darshil Jani, Nov 26 '22 at 09:27
You’re literally saying `profile = JSON.parse(xhr.responseText);`, overwriting the function by some arbitrary object. Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Nov 26 '22 at 15:00

score -1 · Accepted Answer · answered Nov 26 '22 at 09:36

There are many reasons for the that

1. In first time call the function it's remove the itself ( function )

For example you use innerHtml = "" in head section 
    
sometimes happening

.

2. You use a same name for variable and function

Mostly having this error

second time function not calling

1 Answers1