My variable does jot assign to document.getElementById

My problem is that i created a little username input
And my variable in javascript does not assign to the html input box

So my html is :-

let username;



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

  //i think that the problem is here, where the name gets assigned

  username = document.getElementById("textarea").value;



}
console.log(username)
<!DOCTYPE html>

<html>

<head>
   
</head>
<body>
   
<label> create a username </label>

<input id = "textarea"><hr>
<button id = "submit">submit</button>  


<script src=index.js></script>

</body>

</html>

I tried changing the variable to name, username, first name etc. But it didn’t work

Then i tried changing the id’s but that didn’t work either
It always says “undefined”