Q:

HTML Not Changing Button Text

My code is very simple, but I can't figure out how to change the button text. Here's the code
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button id = mybutton> Hello</button>
        <script>
            function onclick(){
            document.getElementById("mybutton").innerHTML="Hi";
        }
        </script>
    </body>
</html>

Can somebody figure out why this is happening? Thanks.
EDIT:
Also note, I'd like for onclick() to be called when the button is clicked.

A:

I would suggest you to catch the element with getElementById and then bind an event listener to it, than just refering to it directly from the DOM.

var elem = document.getElementById("mybutton"); //catch the elem
    elem.addEventListener('click', function() { //bind 'click' event to it
      this.innerHTML = 'Hi!'; //if clicked, change the clicked element text to 'Hi!'
    }); //this keyword refers to the clicked element, but it can be also just elem.innerHTML = 'Hi!'
<button id='mybutton'>Hello</button>

