I want to create a stock calculation system with javacript now i have create

Question

0

Asked: June 13, 20262026-06-13T09:56:16+00:00 2026-06-13T09:56:16+00:00

I want to create a stock calculation system with javacript now i have create

0

I want to create a stock calculation system with javacript now i have create it there is some problem the problem is that i have created 3 rows 1.Purchase,2.Sold,3.Stock.Now i have set that when i give purchase value and sold quantity it will subtract and print value in stock text box and then is next column the stock value also prints in purcahse text box the problem is when the purchase item become nill means 0 so what can i do to add some quantity and start again this process.
the coding is.

<html>
<head>
<title>Stock Information</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
    //------------------------------------Date---------------------------------------------
    var today = new Date();                                                               //
    var dd = today.getDate();                                                             //
    var mm = today.getMonth()+1; //January is 0!                                          //
    var yyyy = today.getFullYear();                                                       //
    today = dd+'/'+mm+'/'+yyyy;                                                           //   
    document.write(today);                                                                //
    //-------------------------------------------------------------------------------------
//----------------------------------------------------  
function program(a,b,c,d,e,f)
{
    var total1=a-b;
    document.stock.t3.value=total1;

    var jump1=document.stock.t3.value;
    document.stock.t4.value=jump1;
    var total2= c-d;
    document.stock.t6.value=total2;

    var jump2=document.stock.t6.value;
    document.stock.t7.value=jump2;
    var total3= e-f;
    document.stock.t9.value=total3;
    }
</script>
</head>
<body>
<center>
<h1 class="table">Stock Information</h1>
</center>
<table width="800" align="center" class="table1">
  <tr>
    <th width="260"class="table">Purchase</th>
    <th width="260"class="table">Sold</th>
    <th width="428"class="table">Stock</th>
  </tr>
  <form name="stock">
  <tr align="center">
    <td><input id="t1" type="text" style="width:260px;" class="input1"/></td>
    <td><input id="t2" type="text" style="width:260px;" class="input1"/></td>
    <td><input id="t3" type="text" style="width:260px;" class="input1" onClick="program(t1.value,t2.value)" readonly/></td>
  </tr>
  <tr align="center">
    <td><input id="t4" type="text" style="width:260px;" class="input1" onClick="program(t1.value,t2.value,t4.value,t5.value)"/></td>
    <td><input id="t5" type="text" style="width:260px;" class="input1"/></td>
    <td><input id="t6" type="text" style="width:260px;" class="input1" onClick="program(t1.value,t2.value,t4.value,t5.value)" readonly/></td>
  </tr>
    <tr align="center">
    <td><input id="t7" type="text" style="width:260px;" class="input1" onClick="program(value1.value,value2.value,t4.value,t5.value)"/></td>
    <td><input id="t8" type="text" style="width:260px;" class="input1"/></td>
    <td><input id="t9" type="text" style="width:260px;" class="input1" onClick="program(value1.value,value2.value,t4.value,t5.value,t7.value,t8.value)"readonly/></td>
  </tr>
 </form>
</table>
</body>
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-13T09:56:17+00:00

I recommend you to keep the logic in JavaScript and keep the HTML clean! 🙂

Instead of onClic you could use onChange

<input onChange="program(this)" />

Next, we will calculate everything in JavaScript…

function program(el) {
  var fields = document.stock;

  // Do nothing, if the required fields are empty
  if (fields.t1.value == '' || fields.t2.value == '') return;

  // Calculate result
  fields.t3.value = fields.t1.value - fields.t2.value;

  // Do nothing, if the required fields are empty
  if (fields.t4.value == '' || fields.t5.value == '') return;

  // Calculate result
  fields.t6.value = fields.t4.value - fields.t5.value;

  // Do nothing, if the required fields are empty
  if (fields.t7.value == '' || fields.t8.value == '') return;

  // Calculate result
  fields.t9.value = fields.t7.value - fields.t8.value;
}

I don’t understand exactly how it suppose to work, , but I will try to repeat the same logic, what you did.

I changed the HTML structure a little:

<form name="stock">
  <table width="800" align="center" class="table1">
    <tr>
      <th width="260"class="table">Purchase</th>
      <th width="260"class="table">Sold</th>
      <th width="428"class="table">Stock</th>
    </tr>

    <tr align="center">
      <td><input id="t1" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t2" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t3" type="text" style="width:260px;" class="input1" readonly /></td>
    </tr>
    <tr align="center">
      <td><input id="t4" type="text" style="width:260px;" class="input1" readonly /></td>
      <td><input id="t5" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t6" type="text" style="width:260px;" class="input1" readonly /></td>
    </tr>
    <tr align="center">
      <td><input id="t7" type="text" style="width:260px;" class="input1" readonly /></td>
      <td><input id="t8" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t9" type="text" style="width:260px;" class="input1" readonly /></td>
    </tr>
  </table>
</form>

Notice that I did set t4 and t7 fields as readonly.

And the JavaScript:

function program(el) {
  var fields = document.stock;

  // Clear the calculation fields
  fields.t3.value = '';
  fields.t6.value = '';
  fields.t9.value = '';
  fields.t4.value = '';
  fields.t7.value = '';

  // Do nothing, if any of the required fields are empty
  if (fields.t1.value === '' || fields.t2.value === '') return;

  // Calculate result
  fields.t3.value = fields.t1.value - fields.t2.value;

  // Copy the result
  fields.t4.value = fields.t3.value;

  // Do nothing, if the required fields are empty
  if (fields.t5.value === '') return;

  // Calculate result
  fields.t6.value = fields.t4.value - fields.t5.value;

  // Copy the result
  fields.t7.value = fields.t6.value;

  // Do nothing, if the required fields are empty
  if (fields.t8.value === '') return;

  // Calculate result
  fields.t9.value = fields.t7.value - fields.t8.value;
}

You can also look at this demo in JSBin: http://jsbin.com/welcome/39835/edit

I hope I got it right.

UPDATE
OK, I did some improvements. But instead of checking if the result is 0, I just allow to write in first place. That function when the result gets copied to the next row’s first field, now is just a helper and will not overwrite the value, if the field is not empty. I think that’s how it should be.

Slightly changed HTML:

<form name="stock">
  <table width="800" align="center" class="table1">
    <tr>
      <th width="260"class="table">Purchase</th>
      <th width="260"class="table">Sold</th>
      <th width="428"class="table">Stock</th>
    </tr>

    <tr align="center">
      <td><input id="t1" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t2" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t3" type="text" style="width:260px;" class="input1" readonly="readonly" /></td>
    </tr>
    <tr align="center">
      <td><input id="t4" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t5" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t6" type="text" style="width:260px;" class="input1" readonly="readonly" /></td>
    </tr>
    <tr align="center">
      <td><input id="t7" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t8" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t9" type="text" style="width:260px;" class="input1" readonly="readonly" /></td>
    </tr>
  </table>
</form>

And, most importantly, JavaScript! There is a DOM traversing involved, so you don’t need depend on the id="" anymore AND you can create as many rows you need without changing the JavaScript code.

function program(el) {
  // Get the row (the <tr> element)
  var row = el.parentNode.parentNode;

  // Get all the <input> elements in row
  var inputs = row.getElementsByTagName('input');

  // Return, if required fields are empty
  if (inputs[0].value === '' || inputs[1].value === '') {
    inputs[2].value = '';
    return;
  }

  // Calculate the result
  inputs[2].value = inputs[0].value - inputs[1].value;

  // Find the next row (<tr> element)
  var nextRow = row.nextSibling.nextSibling;
  while (nextRow !== null && nextRow.tagName !== 'TR') {
    nextRow = nextRow.nextSibling;
  }

  // Return, if the next row doesn't exist
  if (nextRow === null || nextRow.tagName !== 'TR') return;

  // Get all <input> fields in row
  var nextRowInputs = nextRow.getElementsByTagName('input');

  if (nextRowInputs[0].value === '') {
    // Copy the previous row result into next rows first input,
    // only if it's not filled already
    nextRowInputs[0].value = inputs[2].value;
  }
}

And this demo can be tested here: http://jsbin.com/welcome/39893/edit

Vote this answer up and give me some points, please! 🙂

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I want to create a stock calculation system with javacript now i have create

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply