How to XSS on your own webpage?

I am learning XSS for a CTF competition. I have a problem. I was trying to show an alert on my own webpage when I fill <script>alert(1)</script> into the input field on my webpage.

    <html>
    <head>
     <script>
      function c(){
       var inp = document.getElementById("myname");
       var elements = document.getElementsByClassName("hello");
       elements[0].innerHTML = inp.value;
      }
     </script>
    </head>
     <body>
      <div class="hello">Hello world</div>
    
      <input id="myname">
      <button onclick="c()">submit</button>
     </body>
    </html>

Expected output on filling <script>alert(1)</script> on the webpage- An alert Actual output - Nothing happens. The text "Hello world" also goes away.

I have seen a few videos on youtube where they try this trick on forms where HTTP request is being sent. However, why does it not work in this case?

P.S. - I am a beginner in this topic so if the information provided in the question is insufficient , please clarify in comments.