How to get the value of each cell in a table and multiply them all and get the total

Question

I'm trying to get the value of each input in a row and multiply them together but the result is a weird number:

ejs file:

    <td><input type="number" id="nolabour" name="nolabour"></td>
    <td><input type="number" id="labhrperdsy" name="labhrperdsy"></td>
    <td><input type="number" id="labnodays" name="labnodays"></td>
    <td><input type="number" id="labhrrate" name="labhrrate" 
     oninput="labourSum()"></td>
    <td><input type="text" id="labrate" name="labrate"></td>

javascript code:

function labourSum(){

            var aValue = document.getElementById("nolabour").value;
            var bValue = document.getElementById("nolabour").value;
            var cValue = document.getElementById("nolabour").value;
            var dValue = document.getElementById("nolabour").value;
            var result = document.getElementById("labrate");

            result.value = parseFloat(aValue) * parseFloat(bValue) * parseFloat(cValue) * parseFloat(dValue);

        }

result

Please add your example code here, not as an image. For further information, please see [how to ask a good question](https://stackoverflow.com/help/how-to-ask), and take the [tour of the site](https://stackoverflow.com/tour). — palaѕн, Mar 28 '18 at 05:09

score 0 · Answer 1 · answered Mar 28 '18 at 05:11

The value of elements is always a string. Convert the values to numbers first before adding them together. The other problem is that you probably copy-pasted the line, and are selecting #nolabour over and over again.

Try something like this instead:

const totalPay = ['nolabour', 'labhrperdsy', 'labnodays', 'lahbrrate']
.reduce((subtotal, id) => {
  return subtotal + Number(document.getElementById(id));
}, 0);

Vadym Shashkov · Answer 2 · 2018-03-28T05:22:01.183

function onChange() {
  let aValue = document.getElementById('a').value;
  let bValue = document.getElementById('b').value;
  let cValue = document.getElementById('c').value;
  const result = document.getElementById('result')
  
  result.innerHTML = parseFloat(aValue) * parseFloat(bValue) * parseFloat(cValue) 
}

onChange()

<div>
  <input id="a" value="1" onkeyup="onChange()">
  <input id="b" value="2" onkeyup="onChange()">
  <input id="c" value="3" onkeyup="onChange()">
  <br>
  <br>
  Result: <span id="result" style="font-size: 24px"></span>
</div>

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

A very minimal way is to wrap the <input>s into a <form> and use On-event Attribute Event Handler on it.

<form oninput=...

oninput is an on-event that occurs when the user types in an <input>, <textarea>, etc. and the value of the keystrokes are immediately captured for the event handler to process. The values that all form controls deal with are strings not numbers, so the values must be converted before anything mathematical can be applied. The most common way:

<input id="input" value="10">

var string = document.getElementById('input').value; 

var number = parseFloat(string); /*OR*/ parseInt(string, 10); /*OR*/ Number(string);

parseFloat(string);

parseInt(string, 10);

Number(string);

I prefer to convert earlier by using type="number" on <input> and the .valueAsNumber property. Like this:

<input id="input" type="number" value="10">

var number = document.getElementById('input').valueAsNumber;

I added an <output> tag as well and added a for attribute to it with the value of a space delimited list of <input> #ids. Having done that links the <output> to those <input>s so now the values of all the <input>s calculated results will be the value of the <output>.

Demo

input,
output {
  display: block;
  font: 400 16px/1.2 Consolas;
  text-align: right;
  padding: 0 2px;
}

output {
  display: table;
  text-align: right;
  min-width: 20ch;
}

<form id='ABCD' oninput="D.value = A.valueAsNumber * B.valueAsNumber * C.valueAsNumber">
  <input id="A" type="number" value='1'>
  <input id="B" type="number" value='1'>
  <input id="C" type="number" value='1'>
  <output id="D" for="A B C">0</output>
</form>

How to get the value of each cell in a table and multiply them all and get the total

3 Answers3

Demo