变量赋值异常：JavaScript变量无法获取HTML输入框的值

核心问题 #

你的代码里console.log(username)是在页面加载完成后立即执行的，此时用户还未点击提交按钮，username变量仅被声明但未赋值，所以控制台输出undefined。

修正方案 #

把console.log(username)移动到点击事件的回调函数内部，这样只有当用户点击提交按钮时，才会获取输入框的值并打印：

修正后的JavaScript代码 #

let username;

document.getElementById("submit").onclick = function() {
  username = document.getElementById("textarea").value;
  // 点击后才执行打印操作
  console.log(username);
}

额外优化建议 #

HTML中输入框的ID用textarea不太合适，因为这是<input>元素而非<textarea>，容易造成语义混淆，建议修改ID名称，比如username-input：

优化后的HTML代码 #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <label> create a username </label>
  <input id="username-input"><hr>
  <button id="submit">submit</button>  

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

对应修改后的JavaScript代码 #

let username;

document.getElementById("submit").onclick = function() {
  username = document.getElementById("username-input").value;
  console.log(username);
}

内容的提问来源于stack exchange，提问作者Volty