Taking input from multiple forms to print an answer (Javascript)

Question

So I've been working on a small beginner javascript project that takes employee data and calculates and prints to the total with a functioning clear button. For whatever reason, I can't get the calculate function to run.

Here's my calc function and my form:

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>

Thanks! :D

Since you're beginning to learn javascript in a browser environment, you should learn how to add event listeners to DOM objects, rather than using `onclick=` to specify them. There is a useful SO question about [addEventListerner() and attachEvent()](http://stackoverflow.com/q/2657182/17300) that may help you, and it has good links to other references. — Stephen P, Apr 27 '15 at 18:27
Oh I plan to, perhaps when I come back and modify it later on! — Jay Mendelsohn, Apr 27 '15 at 18:45

BiscuitBaker · Answer 1 · 2015-04-27T16:48:42.537

On your last line, you never actually define total as the output box:

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

Try using getElementById either directly:

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

Or by assigning it to a variable:

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

On a side note, are you sure you meant to add the total value to itself at the end there? total + total will double the output figure.

I think OP means something more like `payOutput.value = payOutput.value + total` instead of `payOutput.value = total + total`. First, `payOutput.value` would need to be set to `0`. Although, this could be refactored a bit to be more dynamic (e.g. any number of employees). — redbmk, Apr 27 '15 at 17:28

score 1 · Answer 2 · answered Apr 27 '15 at 20:02

There is quite a lot that is not correct about this.

First, let's eliminate Employee2 and Employee3 and concentrate on just Employee1, which I've reformatted a bit:

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

Now, your (stripped down) Calculate button looks like this (notice I added an 'id' also):

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

Your call to calcPay attempts to use pph1, rhw1, and otw1, using the id or name of the fields. But that doesn't actually get the field value. To get the contents of the field you need to get the DOM object then get its value

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

You have to do something similar to get the values of rhw1 and otw1. That's hard to do with an inline onclick handler like this. You would want a simpler handler which then calls calcPay(...) after fetching each appropriate value. Finally, you will want to set the calculated value somewhere; again, you can't just refer to it by name.

Perhaps something like this (untested) example. You have to strip off the inline handler to use addEventListener instead.

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

Expand this out to use all three Employees by fetching the values for pph2, rhw2, etc. and have total += calcPay(...) on each, finally setting the total in the field.

There are cooler ways to do multiple calculations on repeated structures, but that gets beyond "beginner" level.

Taking input from multiple forms to print an answer (Javascript)

2 Answers2