Home/ Questions/Q 7052515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:23:34+00:00

I am working on a project where calculator functionality is needed and there should

  • 0

I am working on a project where calculator functionality is needed and there should be support for adding more values through JavaScript and also print out the sum from all the numbers in the document.

The digits entered need to be two-digit numbers. Blank or non-numeric data should be skipped.
Here is what I have so far:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Sum Calculator</title>
</head>
<body>
Number of Rows: <input type= text value=2 style="width:30px" maxlength=2 >&nbsp;&nbsp;<input type=button value='Change' onclick="" />
<br /><br />
<table cellspacing=0 cellpadding=4>
<tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr>
</table>
<input type=button value='Recalculate Sum' onclick="" />
</body>
</html>

Any advice how I can add another row in the table with JavaScript and calculate the end result of all the fields in the table?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Quite easy actually. Do this:

      <table cellspacing=0 cellpadding=4>
     <tbody id="whateverId">
       <tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text            maxlength=2/></td></tr>
       <tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>
       <tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr>
     </tbody>
  </table>

    The js for creating:

      var trEl = document.createElement('tr');
  trEl.setAttribute('attribute', 'value'); // replace that with what you need

  var tdEl = document.createElement('td');
  // Here set td attributes
  trEl.appendChild(tdEl);
  // And same for the input im to lasy to write.

  document.getElementById('whateverId').appendChild(trEl);

    And… that’s it. Group it in a function or whatever you want.

    For the sum you just do something like:

      var s = 0;
  for (var i = 0; i < document.getElementById('whateverId').childNodes.length; i++)
  {
      s += document.getElementById(whateverId).childNodes[i].firstChild.firstChild.value; // Hope I counted the first childs right.... you get the point.
  }
    • 0