如何打印输入框value值？获取DOM元素返回null但typeof为object的问题

核心原因 #

你遇到的console.log(元素)返回null但typeof输出"object"是JavaScript的历史遗留特性——typeof null 本身就会返回"object"，不用纠结这个结果，真正的问题是你在DOM元素还没加载完成时就执行了获取元素的代码，导致拿到的是null。

解决步骤 #

1. 确保DOM加载完成后再获取元素 #

有两种常用方式：

• 方式一：把JS脚本放到HTML末尾
  把你的main.js引入代码放在</body>标签的前面，这样浏览器会先渲染完所有DOM元素，再执行JS代码：

  <!-- index.html 末尾 -->
  <script src="main.js"></script>
  </body>
  

• 方式二：使用DOMContentLoaded事件
  如果必须把JS放在<head>里，就用这个事件监听DOM加载完成：

  document.addEventListener('DOMContentLoaded', function() {
    // 所有获取DOM元素的代码放到这里面
    let price = document.getElementById('price');
    let tax = document.getElementById('tax');
    let ads = document.getElementById('ads');
    let discount = document.getElementById('discount');
    let total = document.getElementById('total');
    let amount = document.getElementById('amount');
    let category = document.getElementById('category');
    let create = document.querySelector('#create');
  
    // 现在可以正常打印元素和value了
    console.log(price);
    console.log(price?.value); // 使用可选链避免null报错
  
    function totalint() {
      // 先判断元素存在且value不为空
      if (price && price.value.trim() !== '') {
        let result = (+price.value + +tax.value + +ads.value) - +discount.value;
        total.innerHTML = result;
      }
    }
  });
  

2. 修正代码里的判断逻辑 #

你原来的if (price != '')是错误的，因为price是DOM元素对象（或null），和空字符串比较永远为true，应该判断price.value，同时要先确保price不是null，避免报错。

验证方法 #

完成上述调整后，执行console.log(price.value)就能正常打印输入框的value值了。如果还是拿不到，检查一下index.html里对应的元素ID是否拼写正确，比如id="price"是否存在且没有拼写错误。

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