javascript - 如何根据其他表单框输入使用 javascript 填充表单框

Question

我有一个包含四个数字输入的表单:小时工资、工作时间、周数和工资。

我想根据工资、工时和周数框中的输入自动填写工资框。

因此理论上，如果每小时工资= 15，工作时间= 40，以及周数= 52，那么工资表格框应自动设置为“31200”

有什么简单的方法可以用 JavaScript 做到这一点吗？我尝试了几种不同的方法，但似乎无法使其发挥作用。

如果有帮助，我已经将所有表单框设置为变量:

var wageBox = document.forms[0].wage;
var hoursBox = document.forms[0].hours;
var weeksBox = document.forms[0].weeks;
var salaryBox = document.forms[0].salary;

编辑:抱歉，这是 HTML 表单代码:

<fieldset id="incomeinfo">
            <label for="wage">
              Hourly wage:
              <input type="number" id="wage" name="wage" placeholder="e.g. 15.00">
            </label>
            <label for="Hours">
              Hours worked each week:
              <input type="number" id="hours" name="hours" value="40" placeholder="e.g. 40">
            </label>
            <label for="Weeks">
              Number of weeks a year:
              <input type="number" id="weeks" name="weeks" value="52" placeholder="e.g. 52">
            </label>
            <br />
            <br />
            <label for="salary">
              Salary:
              <input type="number" id="salary" name="salary" placeholder="e.g. 31200" required>
            </label>
          </fieldset>

Answer 1

您可以添加输入更改时的事件，并根据其值计算工资。快速模拟。

fiddle :http://jsfiddle.net/AtheistP3ace/6uatoyd2/

JS:

function calculateSalary () {

    // Get all values we need to calculate
    var wage = parseInt(document.getElementById('wage').value, 10);
    var hours = parseInt(document.getElementById('hours').value, 10);
    var weeks = parseInt(document.getElementById('weeks').value, 10);

    // Calculate salary
    var salary = wage * hours * weeks;

    // Only update salary if we got number
    if (!isNaN(salary)) {
        document.getElementById('salary').value = salary;
    }

}

// Get all inputs, loop and attach change event with calculateSalary handler
var inputs = document.getElementsByTagName('input');
var index = 0, length = inputs.length
for ( ; index < length; index++) {
    inputs[index].addEventListener('change', calculateSalary);
}

HTML:

<input type="text" id="wage" placeholder="wage" />
<input type="text" id="hours" placeholder="hours" />
<input type="text" id="weeks" placeholder="weeks" />
<input type="text" id="salary" placeholder="salary" />

编辑:使用 HTML 更新了 fiddle 。相同的代码可以工作。

http://jsfiddle.net/AtheistP3ace/6uatoyd2/1/