asked on

Javascript simple addition calculator

The below code would be exactly what I need if I could just

get the values to automatically calculate without an event handler
get the values and total to output as text instead of in input boxes
and lastly if the calculater could add decimals instead of rounding up

It would be awesome if someone could help me with this.

<html>
<head>
<script language="javascript">
function addAll(){
var frm = document.f;
var total = 0;
for (var i=0;i<frm.num.length;i++){
total+=parseInt(frm.num[i].value);
}
frm.tot.value=total;
}
</script>
</head>
<body>
<form name="f">
<input type="text" name="num" value="00.00" onclick="addAll()">
<input type="text" name="num" value="00.00" onclick="addAll()">
<input type="text" name="num" value="00.00" onclick="addAll()">
<input type="text" name="num" value="00.00" onclick="addAll()">
<input  name="tot" value="00.00" onfocus="this.click()" readonly>
</form>
</body>
</html>

Open in new window

HonorGod

Something like this perhaps?

<html>
<head>
<script type='text/javascript'>
  function addAll(){
    var row = document.getElementById( 'row1' )
    if ( row && ( row.nodeName == 'TR' ) ) {
      var last = null
      var total = 0.0
      for ( c = 0; c < row.childNodes.length; c++ ) {
        var cell = row.childNodes[ c ]
        if ( cell && cell.nodeName == 'TD' ) {
          last = cell
          var child = cell.firstChild
          if ( child && child.nodeName == '#text' ) {
            total += parseFloat( child.nodeValue );
          }
        }
      }
      if ( last ) {
        var td = document.createElement( 'TD' )
        var text = document.createTextNode( total.toFixed( 2 ) )
//      alert( total.toFixed( 2 ) )
        row.appendChild( td )
        td.appendChild( text )
      }
    }
  }
</script>
</head>
<body onload='addAll()'>
  <form name="f">
    <table border='1'>
      <tr id='row1'>
        <td>1.01</td>
        <td>2.02</td>
        <td>3.03</td>
        <td>4.04</td>
        <td>5.05</td>
      </tr>
    </table>
  </form>
</body>
</html>

Open in new window

turtleman2009

ASKER

Thank you so much. That has the functionality of what I need but my limited understanding keeps me from making necessary alterations. I have posted below how the values need to be. They will be in divs and I need to have code so I can put the total text where I need it

<div class="gift" align="center">00.00</div>
<div class="gift" align="center">00.00</div>
<div class="total" align="center">00.00</div>

Open in new window

HonorGod

Ah, I didn't know what kind of input structure you were using, so I just used a table.

If you are going to be using a div for each entry, that should only take a little effort to change...

One moment please... :-)

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

turtleman2009

ASKER

Thank you so much. This is exactly what I have been looking for. It works perfect!

HonorGod

That is excellent news. Thanks for the grade & the points.

Good luck & have a great day.

turtleman2009

ASKER

I am really sorry I thought I was done but there is one more thing I need.

I have need to change the class on different pages so it will only pull certain years from the database. So I tried to change the class to gift2009. but it gave me a total of NaN. Is their something else I should be doing to change the class.

var gifts = getElementsByClass( 'gift2009' )

Open in new window

HonorGod

What does the HTML containing this class look like?

turtleman2009

ASKER

So it all works when i want to add all years of gifts together but when I want to just ad up one years worth of giving is where it gets crazy:

The <tmpl_var gift_date> produces the date of the gift like 01/01/2009 so I am having to take away the first 6 characters and then add the word gift to the front of it. This way it will only add all of the gift2009's instead of all of the years which are driven from the database all at the same time from a loop.

p.s. the <tmpl_var gift_amount> produces the amount of the gift.

Once again Thanks!

<script type="text/javascript"> 
var str ="<tmpl_var gift_date>"; 
var newStr = str.substring(6);
var newCStr = str.substring(6);
var div = 'gift' + newStr;
var cls = 'gift' + newCStr;
 
document.write("<div id=\"" + div + "\" class=\"" + cls + "\" >");
</script>
	    <tmpl_var name="gift_amount">
	 
	</div>

Open in new window

HonorGod

ooh... That's XML, not HTML.

and the "generated code" is invalid.

--------------------------------------------------
var str ="<tmpl_var gift_date>";
var newStr = str.substring(6);
var newCStr = str.substring(6);
--------------------------------------------------

Do you know what the values of newStr and newCStr are?

"var gift_date>"

I'm quite certain that you don't want to generate a line like this:

<div id="var gift_date>" class="var gift_date>" >

Open in new window

HonorGod

This is a bit off the original question. How about opening a related question?

turtleman2009

ASKER

I am not sure. that is just code that I copied. the only reason I have that code there is to try to get the outputted data like: 01/01/2009 converted to gift2009 so I can use it as a class so it can add the values up

turtleman2009

ASKER

yeah way off original question, I am opening a new one

turtleman2009

ASKER

continued at:

https://www.experts-exchange.com/questions/24158753/Javascript-addition-calculator-part-2.html