Why do juavascript functions work this way? : so i have a good grasp of most static typed languages mainly C and C++. But when I went into javascript i noticed something that bummed me out.

I learned to write this function to interact with inner HTML:

    document.getElementById("SomeHTML").onclick = function(){
    
 

        document.getElementById("AnotherHTML").innerHTML = "<p> Joe has a cat </p>";
    
    }

that is all fine and well but there is a problem, how am i supposed to reuse this and keep it readable?... coming from a C++, I was always taught to write code in this way: 

    function MyFunc()
    {
               document.getElementById("AnotherHTML").innerHTML = "<p> Joe has a cat </p>";
    }
    
    document.getElementById("SomeHTML").onclick = MyFunc();

The latter code being cleaner (at least to me) and I can reuse the function, but it doesnt work ... I am able to write this way in every programming language yet in javascript it produces an error. I dont know what i am missing, i know its something simple. Can someone please help me understand why I cant write javascript functions in this way? Or if I can please tell me how, because i much prefer the latter than the former. thanx in advance.