JavaScript中.value获取输入值后控制台无输出？如何解决

你的代码逻辑本身没问题，控制台没输出大概率是JavaScript代码在DOM元素加载完成前就执行了，导致document.getElementById('button1')找不到对应的按钮元素，点击事件根本没绑定上，自然不会触发控制台输出。

解决方案1：将JS代码放到HTML末尾（最简便） #

把JS代码移到</body>标签之前，确保所有DOM元素都加载完成后再执行JS：

<label>Enter your name: </label><br>
<input type="text" id="name"><br>
<button type="button" id="button1">Submit</button>

<script>
let userName;
document.getElementById('button1').onclick = function() {
  userName = document.getElementById('name').value;
  console.log(userName);
}
</script>
</body>

解决方案2：使用DOMContentLoaded事件 #

如果JS代码必须放在<head>里，用DOMContentLoaded事件包裹代码，等待DOM加载完成后再执行：

<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
  let userName;
  document.getElementById('button1').onclick = function() {
    userName = document.getElementById('name').value;
    console.log(userName);
  }
});
</script>
</head>
<body>
<label>Enter your name: </label><br>
<input type="text" id="name"><br>
<button type="button" id="button1">Submit</button>
</body>

额外排查步骤 #

• 打开浏览器控制台（F12），切换到「Console」标签，看看有没有Cannot read properties of null (reading 'onclick')这类错误，这直接说明元素找不到。
• 确认元素ID是否拼写正确，你的代码里ID是name和button1，和HTML里的一致，这部分没问题。

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