Javascript auto calculating with (+) and (-)

Question

I need some help finding the error in my javascript calculation.

I need to calculate the sum of my input boxes automatically and have my user be able to edit the calculation using + or - buttons.

The code I have already does the calculation automatically if you manually enter the numbers, but pressing the + or - does not change the calculation.

Here is the code:

<html>
<head>
<script language="javascript">
function Calc(className){
var elements = document.getElementsByClassName(className);
var total = 0;

for(var i = 0; i < elements.length; ++i){
total += parseInt(elements[i].value);
}

document.form0.total.value = total;
}

function addone(field) {
field.value = Number(field.value) + 1;
}

function subtractone(field) {
field.value = Number(field.value) - 1;
}
</script>

</head>
<body>
<form name="form0" id="form0">

1: <input type="text" name="box1" id="box1" class="add" value="0" onKeyUp="Calc('add')" onChange="updatesum()" onClick="this.focus();this.select();" />
<input type="button" value=" + " onclick="addone(box1);">
<input type="button" value=" - " onclick="subtractone(box1);">
<br />

2: <input type="text" name="box2" id="box2" class="add" value="0" onKeyUp="Calc('add')" onClick="this.focus();this.select();" />
<input type="button" value=" + " onclick="addone(box2);">
<input type="button" value=" - " onclick="subtractone(box2);">
<br />

3: <input type="text" name="box3" id="box3" class="add" value="0" onKeyUp="Calc('add')" onClick="this.focus();this.select();" />
<input type="button" value=" + " onclick="addone(box3);">
<input type="button" value=" - " onclick="subtractone(box3);">
<br />

<br />
Total: <input readonly style="border:0px; font-size:14; color:red;" id="total" name="total">

</form>
</body></html>

Im sure the issue must be small, I just cant put my finger on it.

You also have `onChange="updatesum()` which seems like a mistake - `updatesum` isn't defined here. — Kobi, Jan 01 '11 at 07:54

score 2 · Accepted Answer · answered Jan 01 '11 at 07:51

One easy way is to update the sum when you click the buttons. You can add Calc('add') to the onclick event, or to the addone and subtractone functions (You probably want to add the class as a parameter though). For example:

function addone(field) {
  field.value = Number(field.value) + 1;
  Calc('add');
}

function subtractone(field) {
  field.value = Number(field.value) - 1;
  Calc('add');
}

Working example: http://jsbin.com/umimu4/

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

You need to call the function Calc('add') after the addone() and call subtractone() call.

EX:

<input type="button" value=" + " onclick="addone(box1); Calc('add')">
<input type="button" value=" - " onclick="subtractone(box1); Calc('add')">

The updatesum() method also seems to be missing.

I think @Kobi has a better answer.

edited May 23 '17 at 12:18

Community

1
1

answered Jan 01 '11 at 07:58

Arun P Johny

384,651
66
527
531

any ideas why the total isnt showing decimals? For example, adding 5.5 to a field only shows in the total as 5 – JB. Jan 01 '11 at 17:29
Because You are using `parseInt()` instead use `parseFloat()` in your `Calc()` method. – Arun P Johny Jan 01 '11 at 17:39
It can leads to problems with decimal places, any calculation involving floating points will not give correct values, you may have to round off the values to some decimal places. Ex: `5.5 + 5.2 + 2.2` will give you `12.89999999999` instead of `12.9`. http://stackoverflow.com/questions/4187146/javascript-display-two-decimal-places-no-rounding may help in in this. – Arun P Johny Jan 01 '11 at 17:47

score 0 · Answer 3 · edited Jan 01 '11 at 17:52

Is it wat you need? I changed your own code:

&lt;html&gt;
&lt;head&gt;
&lt;script language=&quot;javascript&quot;&gt;
function Calc(className){
var elements = document.getElementsByClassName(className);
var total = 0;

for(var i = 0; i &lt; elements.length; ++i){
total += parseInt(elements[i].value);
}

document.form0.total.value = total;
}

function addone(field) {
field.value = Number(field.value) + 1;
}

function subtractone(field) {
field.value = Number(field.value) - 1;
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form name=&quot;form0&quot; id=&quot;form0&quot;&gt;

1: &lt;input type=&quot;text&quot; name=&quot;box1&quot; id=&quot;box1&quot; class=&quot;add&quot; value=&quot;0&quot; onKeyUp=&quot;Calc(&#039;add&#039;)&quot; onChange=&quot;updatesum()&quot; onClick=&quot;this.focus();this.select();&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot; + &quot; onclick=&quot;addone(box1); Calc(&#039;add&#039;)&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot; - &quot; onclick=&quot;subtractone(box1); Calc(&#039;add&#039;)&quot;&gt;
&lt;br /&gt;

2: &lt;input type=&quot;text&quot; name=&quot;box2&quot; id=&quot;box2&quot; class=&quot;add&quot; value=&quot;0&quot; onKeyUp=&quot;Calc(&#039;add&#039;)&quot; onClick=&quot;this.focus();this.select();&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot; + &quot; onclick=&quot;addone(box2); Calc(&#039;add&#039;)&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot; - &quot; onclick=&quot;subtractone(box2); Calc(&#039;add&#039;)&quot;&gt;
&lt;br /&gt;

3: &lt;input type=&quot;text&quot; name=&quot;box3&quot; id=&quot;box3&quot; class=&quot;add&quot; value=&quot;0&quot; onKeyUp=&quot;Calc(&#039;add&#039;)&quot; onClick=&quot;this.focus();this.select();&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot; + &quot; onclick=&quot;addone(box3); Calc(&#039;add&#039;)&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot; - &quot; onclick=&quot;subtractone(box3); Calc(&#039;add&#039;)&quot;&gt;
&lt;br /&gt;

&lt;br /&gt;
Total: &lt;input readonly style=&quot;border:0px; font-size:14; color:red;&quot; id=&quot;total&quot; name=&quot;total&quot;&gt;

&lt;/form&gt;
&lt;/body&gt;&lt;/html&gt;

The attribute `language="javascript"` is not a standard, it is better to use `type="text/javascript"` even though the standard is `type="application/javascript"` since IE will not understand this. — Arun P Johny, Jan 01 '11 at 17:55
I know, you are right but I edited the original script! It is not my own one. — ehsun7b, Jan 02 '11 at 07:48

Javascript auto calculating with (+) and (-)

3 Answers3