Issue on calling Javascript function twice results called once

Question

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%">

Probably not relevant, but i <= divs.length should be i < divs.length. — Derek 朕會功夫
– Derek 朕會功夫, Commented Nov 17, 2016 at 21:08
If divs[i] is a div element, then it does not have a value property. Seems not right. — trincot
– trincot, Commented Nov 17, 2016 at 21:10
what makes you think it's only running once? of course it's running twice but the second time is overwriting the changes from the first time. did you expect it to append the value rather than change it? — I wrestled a bear once.
– I wrestled a bear once., Commented Nov 17, 2016 at 21:10
It is best practice to avoid putting too much script in the attributes of an element. Instead, move your code a new function and have that call CalSum multiple times. — vbguyny
– vbguyny, Commented Nov 17, 2016 at 21:11

Aruna · Accepted Answer · 2016-11-17 21:31:43Z

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.

When looping the elements, condition should be i < divs.length and not i <= divs.length
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.
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.
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>

Thanks so much for your help!! It works. I wasn't able to use the innerHTML though; it had to be value as these are not div tags, but input controls. div was just the variable name I uses as I was copying from something else. Thanks again!!

Collectives™ on Stack Overflow

Issue on calling Javascript function twice results called once

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related