Question

所以我一直致力于一个小型的初学者javascript项目，该项目通过一个功能清晰的按钮获取员工数据并计算并打印到总数。无论出于何种原因，我都无法运行计算功能。

这是我的计算功能和形式：

function calcPay(payHr, regHr, otHr) {
  var basePay = (payHr.value * regHr.value);
  var otPay = (otHr.value * (payHr.value * 1.5));
  var total = (basePay + otPay);
  total.value = total + total;
}

<form name="Payroll">
  <p>Employee1 ID:
  <input type="text" id="eid1" name="eid1">Pay per hour:
  <input type="text" id="pph1" name="pph1">Hours worked:
  <input type="text" id=" rhw1" name="rhw1">Overtime worked:
  <input type="text" id="otw1" name="otw1"></p>

  <p>Employee2 ID:
  <input type="text" id="eid2" name="eid2">Pay per hour:
  <input type="text" id="pph2" name="pph2">Hours worked:
  <input type="text" id="rhw2" name="rhw2">Overtime worked:
  <input type="text" id="otw2" name="otw2"></p>

  <p>Employee3 ID:
  <input type="text" id="eid3" name="eid3">Pay per hour:
  <input type="text" id="pph3" name="pph3">Hours worked:
  <input type="text" id="rhw3" name="rhw3">Overtime worked:
  <input type="text" id="otw3" name="otw3"></p>

  <input type="button" name="toClick" onclick="JavaScript: calcPay(pph1, rhw1, otw1);calcPay(pph2, rhw2, otw2); calcPay(pph3, rhw3, otw3);" value="Calculate">

  <input type="button" name="toClick" onclick="JavaScript: clearField();" value="Clear All">
  <br>
  <br>
  <p>Total payout this week:
    <input type="text" id="total" value="total">

</form>

谢谢！：d

Answer 1

在最后一行，您实际上从未将total定义为输出框：

var total = (basePay + otPay);
total.value = total + total;

直接尝试使用getElementById：

function calcPay(payHr, regHr, otHr){
    var basePay = (payHr.value * regHr.value);
    var otPay = (otHr.value * (payHr.value * 1.5));
    var total = (basePay + otPay);
    document.getElementById('total').value = total + total;
}

或者将其分配给变量：

function calcPay(payHr, regHr, otHr){
    var basePay = (payHr.value * regHr.value);
    var otPay = (otHr.value * (payHr.value * 1.5));
    var total = (basePay + otPay);
    var payOutput = document.getElementById('total');
    payOutput.value = total + total;
}

另一方面，您确定是否打算在那里将总价值添加到自身？ total + total将使输出数字加倍。

Answer 2

有很多关于此事的不正确。

首先，让我们消除Employee2和Employee3，并专注于Employee1，我已经重新格式化了一下：

<p>
Employee1 ID: <input type="text" id="eid1" name="eid1"> <br>
Pay per hour: <input type="text" id="pph1" name="pph1"> <br>
Hours worked: <input type="text" id=" rhw1" name="rhw1"> <br>
Overtime worked: <input type="text" id="otw1" name="otw1"> <br>
</p>

现在，你的（精简版）计算按钮看起来像这样（注意我添加了一个＆＃39; id＆＃39;也是）：

<input type="button" name="toClick" id="calc"
       onclick="JavaScript: calcPay(pph1, rhw1, otw1);" value="Calculate">

您对calcPay的调用尝试使用字段的ID或名称来使用pph1，rhw1和otw1。但这并没有真正获得现场价值。要获取字段的内容，您需要获取DOM对象，然后获取其值

var pph = document.getElementById('pph1');
var rate_ph = pph.value * 1; // multiply to get 'typeof rate_ph' to be "number"

你必须做类似的事情来获取rhw1和otw1的值。这样的内联onclick处理程序很难做到。您需要一个更简单的处理程序，然后在获取每个适当的值后调用calcPay（...）。最后，您需要在某处设置计算值;再说一遍，你不能只是按名称来引用它。

也许是这样的（未经测试的）例子。您必须剥离内联处理程序以改为使用addEventListener。

<input type="button" name="toClick" id="calc" value="Calculate">

function calcPay(payHr, regHr, otHr) {
    var basePay = (payHr.value * regHr.value);
    var otPay = (otHr.value * (payHr.value * 1.5));
    var total = (basePay + otPay);
    return total;
}

function runCalculation(evt) {
    var total = 0;

    var pph = document.getElementById('pph1');
    var rate_ph = pph.value * 1;
    // or, combined:
    // var rate_ph = document.getElementById('pph1').value * 1;

    var rhw = document.getElementById('rhw1');
    var reg_hours = rhw.value * 1;

    var otw = document.getElementById('otw1');
    var ot_hours = otw.value * 1;

    total += calcPay(rate_ph, reg_hours, ot_hours);
    document.getElementById('total').value = total;
}

var calcbtn = document.getElementById('calc'); // this is why I added the id
calcbtn.addEventListener('click', runCalculation);

通过获取pph2，rhw2等的值来扩展它以使用所有三个Employees，并且每个都有total += calcPay(...)，最后在字段中设置总数。

有更酷的方法可以对重复的结构进行多次计算，但这超出了初学者和＃34;水平。

从多个表单输入来打印答案（Javascript）

2 个答案: