时间戳

首页 > 解决方案 > 有没有办法编辑 javascript 函数以在 html 表单输出中实时更新？

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

问题描述

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

HTML

  <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>

Javascript 函数

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;
}
});

任何指针将不胜感激。

标签： javascriptjqueryhtmlcss

解决方案

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

这可以通过以下几种方式完成：

突兀地（不推荐）使用元素的onChange属性（JSFiddle）

使用（JSFiddle）不显眼（首选）.on('change', function() {} })

我从标签中假设您正在使用 jQuery，但您可以使用.addEventListener('change', callback, false)（JSFiddle）使用 vanilla JS 实现相同的目标

推荐阅读