CODEWITHSUNDEEP
javascript
bfreed49
bfreed49

Reputation: 3

Issue on calling Javascript function twice results called once

I am working on a project that requires a form be built. The form has a function that sums up the columns as well as the rows. I am strictly using HTML and JavaScript. I am unable to get the JavaScript function called twice, once for the row and once for the column (I will actually be calling it 3 times as I need to do section totals as well). I have created different classes for the column controls that will need summed up and a different class for the row controls that will need to be summed up, hence the two different classes in the input control. I also believe that it could be in the for loop as I commented it out and put used an alert statement and it seemed to work perfectly. See the following code:

JavaScript:

<script type="text/JavaScript">
function CalcSum(displayIn, calcClass){
    var sum = 0;
    var displayCell = displayIn;
    className = calcClass;

    var divs = document.getElementsByClassName(className);
    var args = [];

    for (var i = 0; i <=divs.length; i++){

        args.push(divs[i].value);
        val = divs[i].value;
        sum += val*1;
        document.getElementById(displayCell).value = sum;
        dollarAmount("Form1", displayCell);
    }
}

HTML Control:

<input type="text" name="ctl_001" value="" id="ctl_001" class="col4txrev col4" onchange="CalcSum('T1_TOT_C4_TXREV','col4txrev');CalcSum('T1_TOT_C4','col4');" style= "width: 100%">

Upvotes: 0

Views: 860

Answers (1)

Aruna
Aruna

Reputation: 12022

You have multiple errors in your script technically and functionally based on my understanding of your question.

I have corrected the errors and can see the console printing the log twice when they called.

Note: Anyways, don't call the function twice from the inline attribute. Create another function which will do the same and call it from the onchange event (or) create the onchange listener programmatically.

  1. When looping the elements, condition should be i < divs.length and not i <= divs.length
  2. To find a text inside the div, it should be innerHTML as below and not value. value can be used for the form input elements which values can be changed by the end users.
  3. To calculate the sum, the value should be converted to a number using either parseInt or parseFloat since the text/value of the element is generally a text.
  4. If you have to assign the final value of the sum to another div element and call another method, it should be outside the for loop. But if you really need this to set/call for each loop, then it can be inside the for loop.

function CalcSum(displayIn, calcClass){
    var sum = 0;
    var displayCell = displayIn;
    var className = calcClass;
  
  console.log('called');

    var divs = document.getElementsByClassName(className);
    var args = [];

    for (var i = 0; i < divs.length; i++){

        //args.push(divs[i].value);
        var val = divs[i].innerHTML;
        args.push(val);
        sum += parseInt(val) * 1;  // It can be parseFloat
    }
  
    document.getElementById(displayCell).value = sum;
    dollarAmount("Form1", displayCell);
}

// dummy function
function dollarAmount(form, elm){
  
}
<input type="text" name="ctl_001" value="" id="ctl_001" class="col4txrev col4" onchange="CalcSum('T1_TOT_C4_TXREV','col4txrev');CalcSum('T1_TOT_C4','col4');" style= "width: 100%">

<div class="col4txrev">10</div>
<div id="T1_TOT_C4_TXREV"></div>
<div class="col4">20</div>
<div id="T1_TOT_C4"></div>

Upvotes: 1

Related Questions