试试这个。您在文档准备好之前读取控件。

解决方案 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>       
$(document).ready(function () {
   const bill = document.getElementById("bill");
   bill.addEventListener("input", function (e) {
   console.log(bill.value);
  })
});
</script>

解决方案 2 不使用 JQuery

<script>
    function printVal() {
       const bill = document.getElementById("bill");
       if (bill != null) {
          bill.addEventListener("input", function (e) {
          console.log(bill.value);
        });
      }
    }           
</script>

<div class="spacing">
  <h5>Bill</h5>
  <label for="bill"></label>
  <input id="bill" type="number" name="bill" onkeypress="printVal();">
</div>

您必须将其转换为整数

<script>
  const bill = document.querySelector("#bill");
  bill.addEventListener("input", function (e) {
    var a = parseInt(bill.value);
    console.log(bill.value);
    console.log(typeof a);
  })
</script>

脚本标记应位于要应用处理程序的 html 的 之后 ，最好位于结束 body 标记之前。

实现此目的的另一种方法是使用 事件委托 。输入处理程序附加到文档。输入元素的检测在处理程序函数内完成。在这种情况下，脚本位置无关紧要。

示例

<script>
  document.addEventListener(`input`, evt => {
    if (evt.target.id === `bill` && evt.target.value.trim().length) {
      console.log(evt.target.value);}
    });
</script>

<div class="spacing">
  <h5>Bill</h5>
  <label for="bill"></label>
  <input id="bill" type="number" name="bill" value="">
</div>