有没有办法在html表单输出中编辑javascript函数以进行实时更新？

我使用HTML表单和javascript函数编写了一个工作缺勤计算器。不幸的是，我需要实时更新输出，如果不多次启动该函数，我就无法知道如何做到这一点

HTML

---

任何指针都将不胜感激。

您需要将函数绑定到输入元素的更改事件

这可以通过两种方式实现：

使用元素的

onChange

属性（）

使用

.on（'change'，function（）{}}）

（）

---

我从标签中假设您使用的是jQuery，但是您可以使用

实现与vanilla JS相同的功能。addEventListener（'change'，callback，false）

（）

ID必须是唯一的。另外，如何调用函数？多次调用函数有什么问题？另外，请注意，在链接的小提琴中，我将.innerHtml的使用位置从

+=

更改为

=

（我对原始行进行了注释以供比较）。使用

+=

会将更新后的值附加到已经存在的值上，而不是替换它。感谢+=提示，这是我遇到的另一个问题。EventListener似乎没有在浏览器中启动。我已经试过了，并且认为我做错了，你知道为什么不会吗？js文件链接到了.html，其他js代码运行良好。这是我脚本的位置。我在输入元素之前就有了它，将它替换到html正文的底部修复了它。非常感谢詹姆斯，一切都很好@roman74：是的，通常最佳做法是将页面加载期间不需要的任何JavaScript（无论是在

标记之间还是在.js文件中）放在页面底部。这不仅允许在任何js运行之前构建DOM，它还优化了明显的页面加载时间，因为浏览器是自上而下呈现的，所以在等待加载脚本时内容已经呈现。

  <form id="absence-form">
    <div class="input">
      <div id="title">Absence Calculator</div>

      <div id="firstCell">
        <div id="instruct">
          Enter number of employees:
        </div>
        <input id="employees" type="text" name="employees">

          <div id="secondCell">
            <div id="instruct">
              Enter average salary:
            </div>
          </div>
          <input id="salary" type="text" name="salary">

          <div id="thirdCell">
            <div id="instruct">
              Enter absence %:
            </div>
          </div>

          <input id="absence" type="text" name="absence">
      </div>

      <div id="instruct">
        <div id="output">Total salary (£):
        <div id="totalSalary">
        </div></div>
          <div id="output">Monthly absence cost (£):
          <span id="monthlyAbsence">
        </span></div>
        <div id="output">Annual absence cost (£):
        <span id="absenceCost">
        </span></div>
      </div>
  </div>
</form>

function multiply() {

  var employees = document.getElementById('employees').value;
  var salary = document.getElementById('salary').value;
  var totalSalary = parseInt(employees) * parseInt(salary);
  var result1 = document.getElementById('totalSalary');
  result1.innerHTML += totalSalary;
  var absence = document.getElementById('absence').value;
  var absenceCost = parseInt(totalSalary) / 100 * parseInt(absence);
  var result2 = document.getElementById('absenceCost');
  result2.innerHTML += absenceCost;
  var monthlyAbsence = parseInt(absenceCost) / 12;
  var result3 = document.getElementById('monthlyAbsence');
  result3.innerHTML += monthlyAbsence;
}
});