学习JS获取input值时报Cannot read property 'value' of null如何解决

报错原因 #

getElementById方法仅接收纯id字符串作为参数，不需要额外添加CSS选择器的#前缀。你代码中传入#txtvel时，浏览器会尝试查找id为#txtvel的DOM元素，但你HTML中对应输入框的id是txtvel，因此查找结果为null，后续访问null.value时就触发了该TypeError。

修复方法 #

删除getElementById参数中的#前缀即可，修复后的完整JS代码如下：

function calcular() {
  var txtv = document.getElementById('txtvel')
  var res = document.getElementById('res')
  var vel = Number.parseFloat(txtv.value)
  res.innerHTML = `<p>Sua velocidade atual é de <strong>${vel} Km/h</strong></p>`
}

补充说明 #

如果你习惯使用带选择器前缀的写法，可以改用querySelector方法，以下写法也是生效的：
var txtv = document.querySelector('#txtvel')

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