Javascript Loop in function

Question

I want to loop inside javascript for the following function.

function wgtAbsCalculation() {

var num=i.value;

tntwgt1.value = parseFloat(tntwgtt1.value*ajcliter.value).toFixed(2);
tntwgt2.value = parseFloat((tntwgtt2.value - tntwgtt1.value)*ajcliter.value).toFixed(2);
tntwgt3.value = parseFloat((tntwgtt3.value - tntwgtt2.value)*ajcliter.value).toFixed(2);
tntwgt4.value = parseFloat((tntwgtt4.value - tntwgtt3.value)*ajcliter.value).toFixed(2);
tntwgt5.value = parseFloat((tntwgtt5.value - tntwgtt4.value)*ajcliter.value).toFixed(2);
tntwgt6.value = parseFloat((tntwgtt6.value - tntwgtt5.value)*ajcliter.value).toFixed(2);
tntwgt7.value = parseFloat((tntwgtt7.value - tntwgtt6.value)*ajcliter.value).toFixed(2);
tntwgt8.value = parseFloat((tntwgtt8.value - tntwgtt7.value)*ajcliter.value).toFixed(2);
tntwgt9.value = parseFloat((tntwgtt9.value - tntwgtt8.value)*ajcliter.value).toFixed(2);
tntwgt10.value = parseFloat((tntwgtt10.value - tntwgtt9.value)*ajcliter.value).toFixed(2);

}

I try like this but it does not work.

    tntwgt1.value = parseFloat(tntwgtt1.value*ajcliter.value).toFixed(2);
for (i = 2; i < num; i++) {
    tntwgt+i+.value = parseFloat((tntwgtt+(i+1)+.value - tntwgtt+i+.value)*ajcliter.value).toFixed(2);
}

Please help

The whole source code is here

this is from Database using php

$color_id=$_GET['color_id'];
$mf_id=$_GET['mf_id'];

//Tint Result.
$sql1="select tint_result.tnt_code, tnt_name, weight_mg, tnt_price from tint_result
join tint_name on tint_name.tnt_code=tint_result.tnt_code
where color_id='".$color_id."' order by weight_mg";
$result1=mysqli_query($connection, $sql1);

while ($row1=mysqli_fetch_array($result1)) {
    $tint_list[] = array('tnt_code' => $row1['tnt_code'],
                            'tnt_name' => $row1['tnt_name'],
                            'weight' => $row1['weight_mg'],
                            'tnt_price' => $row1['tnt_price']);
}

This is where i display in html

<table class="table">
                        <thead>
                          <tr class="success">
                            <th class="text-center">Tint<br>Code</th>
                            <th class="text-center">Tint Name<br></th>
                            <th class="text-center">Weight(g) [0.25L]</th>
                            <th class="text-center">Weight(g) <br>[0.5L]</th> 
                            <th class="text-center">Weight(g)<br>[xxL]</th>                                
                          </tr>
                        </thead>
                        <tbody>
                        <?php
                        $i=1;
                            if (count($tint_list)>0) {                                    
                                foreach ($tint_list as $tint) { ?>
                          <tr>
                            <td style="width:10%;"><?php echo $tint['tnt_code'];?></td>
                            <td style="width:45%;"><?php echo $tint['tnt_name'];?></td>
                            <td style="width:15%;"><b><input type="text" readonly="readonly" class="text-right" style="font-size:18px; width:100px;"  id="atntwgt<?php echo $i;?>" name="atntwgt<?php echo $i;?>" value="<?php $round1=round(($tint['weight'])/1000, 2); echo number_format((0.25*$round1), 2, '.', '');?>"></b>
                            </td>
                            <td style="width:15%;"><b><input type="text" readonly="readonly" class="text-right" style="font-size:18px; width:100px;"  id="btntwgt<?php echo $i;?>" name="btntwgt<?php echo $i;?>" value="<?php $round2=round(($tint['weight'])/1000, 2); echo number_format((0.5*$round2), 2, '.', '');?>"></b>
                            </td>
                            <td style="width:15%;"><b><input type="text" readonly="readonly" class="text-right" style="font-size:20px; width:120px;"  id="tntwgt<?php echo $i;?>" name="tntwgt<?php echo $i;?>" value="<?php $round=round(($tint['weight'])/1000, 2); echo number_format(($liter*$round), 2, '.', '');?>"></b>
                                <input type="hidden" readonly="readonly" class="text-right" id="tntwgtt<?php echo $i;?>" name="tntwgtt<?php echo $i;?>" value="<?php $round=round(($tint['weight'])/1000, 2); echo number_format(($liter*$round), 2, '.', '');?>">
                            </td>
                          </tr>
                        <?php
                            $i++; }
                            }
                        ?>
                    <input type="hidden" class="text-right" id="i" name="i" value="<?php echo $i;?>">
                        </tbody>
                    </table>

this is where the user choose

<form class="form-inline" role="form">
    <div class="form-group">
        <div class="radio">
        <label>
            <input type="radio" name="radiobtn" id="cum" onclick="wgtCalculation()" checked>
            Cumulative
        </label>
        </div>
        <div class="radio">
        <label>
            <input type="radio" name="radiobtn" id="abs" value="absolute" onclick="wgtAbsCalculation()">
            Absolute
        </label>
        </div>
    </div>
    &nbsp
    <div class="form-group">
            Desired Quantity:
            <input type="text" onkeyup="Javascript: wgtCalculation()" onkeypress="return isNumberKey(event)" class="form-control" id="ajcliter" name="ajcliter" value="1"> Lt
    </div>
    &nbsp
    <div class="form-group">
        <a class="btn btn-primary" href="Javascript: price()">Price</a>
    </div>

this is javascript part

function wgtCalculation() {
$("#abs").prop("checked", false); 
$("#cum").prop("checked", true); 

tntwgt1.value = parseFloat(tntwgtt1.value * ajcliter.value).toFixed(2);
tntwgt2.value = parseFloat(tntwgtt2.value * ajcliter.value).toFixed(2);
tntwgt3.value = parseFloat(tntwgtt3.value * ajcliter.value).toFixed(2);
tntwgt4.value = parseFloat(tntwgtt4.value * ajcliter.value).toFixed(2);
tntwgt5.value = parseFloat(tntwgtt5.value * ajcliter.value).toFixed(2);
tntwgt6.value = parseFloat(tntwgtt6.value * ajcliter.value).toFixed(2);
tntwgt7.value = parseFloat(tntwgtt7.value * ajcliter.value).toFixed(2);
tntwgt8.value = parseFloat(tntwgtt8.value * ajcliter.value).toFixed(2);
tntwgt9.value = parseFloat(tntwgtt9.value * ajcliter.value).toFixed(2);
tntwgt10.value = parseFloat(tntwgtt10.value * ajcliter.value).toFixed(2);

}

function wgtAbsCalculation() {

var num=i.value;

tntwgt1.value = parseFloat(tntwgtt1.value*ajcliter.value).toFixed(2);
tntwgt2.value = parseFloat((tntwgtt2.value - tntwgtt1.value)*ajcliter.value).toFixed(2);
tntwgt3.value = parseFloat((tntwgtt3.value - tntwgtt2.value)*ajcliter.value).toFixed(2);
tntwgt4.value = parseFloat((tntwgtt4.value - tntwgtt3.value)*ajcliter.value).toFixed(2);
tntwgt5.value = parseFloat((tntwgtt5.value - tntwgtt4.value)*ajcliter.value).toFixed(2);
tntwgt6.value = parseFloat((tntwgtt6.value - tntwgtt5.value)*ajcliter.value).toFixed(2);
tntwgt7.value = parseFloat((tntwgtt7.value - tntwgtt6.value)*ajcliter.value).toFixed(2);
tntwgt8.value = parseFloat((tntwgtt8.value - tntwgtt7.value)*ajcliter.value).toFixed(2);
tntwgt9.value = parseFloat((tntwgtt9.value - tntwgtt8.value)*ajcliter.value).toFixed(2);
tntwgt10.value = parseFloat((tntwgtt10.value - tntwgtt9.value)*ajcliter.value).toFixed(2);

// there is more code }

the problem is, if i got only 4 input rows then what ever after that code (i mean more code part) is not executing at all.

Answer 1

You could do something like:

var myArray = [tntwgt1, tntwgt2, ... ]
for (var i = 1, i < myArray.length, i++) {
    myArray[i].value = parseFloat((myArray[i].value - myArray[i-1].value)*ajcliter.value).toFixed(2);
}

Answer 2

If your variables are all properties of an object, or even global properties (e.g. of the window object) you could do this:

tntwgt1.value = parseFloat(tntwgtt1.value*ajcliter.value).toFixed(2);
for (i = 2; i < num; i++) {
    window[tntwgt+i].value = parseFloat((window[tntwgtt+(i+1)].value - window[tntwgtt+i].value)*ajcliter.value).toFixed(2);
}

Basically you can access object properties, like a dictionary, using a string key name (which is the property name). You reference them using object[propertyNameString].