javascript - 调用 Javascript 函数两次结果调用一次的问题

Question

我正在开发一个需要构建表单的项目。该表单具有对列和行进行求和的函数。我严格使用 HTML 和 JavaScript。我无法让 JavaScript 函数调用两次，一次针对行，一次针对列(我实际上会调用它 3 次，因为我还需要进行部分总计)。我为需要求和的列控件创建了不同的类，为需要求和的行控件创建了不同的类，因此输入控件中有两个不同的类。我还相信它可能在 for 循环中，因为我将其注释掉并使用了警报语句，它似乎工作得很好。请参阅以下代码:

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 控制:

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

Answer 1

根据我对您问题的理解，您的脚本在技术和功能上存在多个错误。

我已经更正了错误，并且可以看到控制台在调用时打印了两次日志。

注意:无论如何，不​​要从内联属性中调用该函数两次。创建另一个执行相同操作的函数并从 onchange 调用它事件(或)创建onchange以编程方式监听器。

1. 循环元素时，条件应为 i < divs.length和不是i <= divs.length
2. 在 div 中查找文本，应该是innerHTML如下而不是value 。 value可用于表单输入元素最终用户可以更改哪些值。
3. 计算sum ，该值应转换为数字使用 parseInt或parseFloat自 text/value的该元素通常是文本。
4. 如果您必须分配 sum 的最终值到另一个div元素并调用另一个方法，它应该在 for 之外环形。但如果你真的需要它来设置/调用每个循环，那么它可以在for里面循环。

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>