从HTML向JavaScript获取输入时value值为空白的问题咨询

你现在的代码会在页面加载完成后立即执行，此时你还没有在输入框中填入内容，所以读取到的value是默认空值。

你需要通过事件监听的方式，在用户完成输入操作后再获取输入值，常见实现方式如下：

方案1：实时监听输入内容变化 #

用户每次在输入框中输入内容时就触发取值逻辑：

<input type="number" id="text">

<script>
document.getElementById('text').addEventListener('input', function() {
  const text = this.value
  console.log(text)
})
</script>

方案2：点击按钮后获取输入值 #

等用户完成全部输入后，点击按钮再取值：

<input type="number" id="text">
<button id="fetchBtn">获取输入值</button>

<script>
document.getElementById('fetchBtn').addEventListener('click', function() {
  const text = document.getElementById('text').value
  console.log(text)
})
</script>

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