如何使用提交事件将 addEventListener 附加到输入字段？

Question

我正在制作一个简单的小费计算器，首先我尝试保存用户可以在输入字段中输入的账单金额的值（此输入字段具有类型数字属性）。没有任何按钮可以提交值，因此我想使用 addeventlistener 的提交事件而不是单击事件。在 addeventlistener 内部，我正在阻止事件的默认行为，然后我尝试将金额保存为变量，但控制台始终为空。

这是 HTML 代码：

<div class="form_bill">
    <h2>Bill</h2>
    <div class="input_icons">
      <i class="fa fa-usd icon"></i>
      <input type="number" class="form_input bill_input" placeholder="0"/>
    </div>
</div>

这是我的JS代码：

const billInput = document.querySelector('.bill_input');

billInput.addEventListener('submit', function (e) {
    e.preventDefault();

    const billAmount = billInput.value;

    console.log(billAmount);
});

我尝试将输入标记更改为表单标记，我尝试将类型编号更改为输入文本，我尝试了单击事件，但没有成功。我想将输入值保存为变量，以便之后我可以使用该值。

Answer 1

Submit 事件仅由

<form>

元素触发，没有 <

<input>

元素，您可以监听 change 事件

billInput.addEventListener('change', () => {
    const billAmount = billInput.value;
    console.log(billAmount);
});