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.

If the tntwgt... variables are global use the bracket notation to access them window["tntwgt" + i].value — Andreas
– Andreas, Commented Jul 29, 2015 at 16:09
tntwgt1.value is from html input tag i am doing calculation with javascript. the number of input is not fix, so it got me trouble. — Soe Chit Kaung
– Soe Chit Kaung, Commented Jul 31, 2015 at 2:40

iCollect.it Ltd · Accepted Answer · 2015-07-29 16:10:14Z

1

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].

answered Jul 29, 2015 at 16:10

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Soe Chit Kaung Over a year ago

its doesnot work. the variables are from html input tag. could u please help.?

iCollect.it Ltd Over a year ago

@ Soe Chit Kaung: Please show the rest of the code so we can see where those variables are created/declared. The parent of the variables is the object you need to target instead of window.

BravoZulu · Accepted Answer · 2015-07-29 16:13:36Z

0

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);
}

answered Jul 29, 2015 at 16:13

BravoZulu

1,14013 silver badges24 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

You could, but why bother? As the variable names have a specific pattern, just index the parent object of the variables (which is window for globals).

Collectives™ on Stack Overflow

Javascript Loop in function

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related