Question

我是javascript的新手并试图重构一些代码，显然我在javascript中缺少一些我想学习的东西。所有5个列表框都选择了一些内容后，此代码会生成一个值：

function GetTotal() {
        //_listSeverity = document.getElementById("_listSeverity");
        function ParseListBoxvalue(listBox) {
        return parseInt(GetListBoxValue(listBox),10);
        }
        _listSeverity = document.getElementById("<%= _listSeverity.ID %>");
        _listAssociate = document.getElementById("<%= _listAssociateImpact.ID %>");
        _listCustomerImpact = document.getElementById("<%= _listCustomerImpact.ID %>");
        _listRegulatoryImpact = document.getElementById("<%= _listRegulatoryImpact.ID %>");
        _listShareholderImpact = document.getElementById("<%= _listShareholderImpact.ID %>");
        _calculatedTotal = (ParseListBoxvalue(_listAssociate) +
            ParseListBoxvalue(_listSeverity) + ParseListBoxvalue(_listCustomerImpact) 
           +ParseListBoxvalue(_listRegulatoryImpact) + ParseListBoxvalue(_listShareholderImpact)
          )/ 5;
        if (isNaN(_calculatedTotal))
            document.getElementById("_total").innerHTML = "Not enough information";
        else
            document.getElementById("_total").innerHTML = _calculatedTotal;
    }

然后我尝试重构为for循环以消除一些代码重复。我尝试了很多if(typeof _calculatedValue !='undefined')我在谷歌上发现的方法，看看是否可以解决它。据我了解，我没有遇到范围问题，因为唯一的实际范围受function(){}声明的限制。这永远不会产生价值。我意识到/ 5还没有进入，但这对我来说似乎并不是因为总是产生NaN。

 function GetTotal() {
        //_listSeverity = document.getElementById("_listSeverity");
        function ParseListBoxvalue(listBox) {
        return parseInt(GetListBoxValue(listBox),10);
    }
        var _ListIds=new Array("<%= _listSeverity.ID %>","<%= _listAssociateImpact.ID %>",
            "<%= _listCustomerImpact.ID %>", "<%= _listRegulatoryImpact.ID %>",
            "<%= _listShareholderImpact.ID %>");
//            _calculatedTotal = (ParseListBoxvalue(_listAssociate) +
//                ParseListBoxvalue(_listSeverity) + ParseListBoxvalue(_listCustomerImpact) 
//               +ParseListBoxvalue(_listRegulatoryImpact) + ParseListBoxvalue(_listShareholderImpact)
        //              )/ 5;
        for (i = 0; i < _ListIds.length; i++) {
            if (i==0)
                _calculatedTotal = ParseListBoxvalue(_ListIds[i]);
            else
                _calculatedTotal += ParseListBoxvalue(_ListIds[i]);
        }

        if (isNaN(_calculatedTotal))
            document.getElementById("_total").innerHTML = "Not enough information";
        else
            document.getElementById("_total").innerHTML = _calculatedTotal;
    }

其他功能应该没有关系，但现在是：

function GetListBoxValue(listBox) {
        index = listBox.selectedIndex
        try {
            opt = listBox.options[index]
            return opt.value;
        } catch (e) { return null; }

    }

for循环有什么问题？或者它是除了for循环之外导致重构不产生值的东西吗？

Answer 1

您没有致电document.getElementById()：

_calculatedTotal = ParseListBoxvalue(_ListIds[i]);

应该是

_calculatedTotal = ParseListBoxvalue(document.getElementById(_ListIds[i]));

和其他分支类似。

Answer 2

一些问题：

正如格雷格所说，你没有打电话给document.getElementById。
您没有将总数除以原来的代码所用的5。
请务必声明您的变量（例如i）;否则，它们是全局的（参见The Horror of Implicit Globals）。（旧代码对此也非常疏忽。）
强烈建议使用大括号，即使分支中只有一个语句也是如此。

Answer 3

一些改进：

var _calculatedTotal  = ParseListBoxvalue(document.getElementById(_ListIds[0]));
for (var i = 1; i < _ListIds.length; i++) {
 _calculatedTotal += ParseListBoxvalue(document.getElementById(_ListIds[i]));
}

document.getElementById("_total").innerHTML = isNaN(_calculatedTotal) ? "Not enough information" : _calculatedTotal


function GetListBoxValue(listBox) {
 if(listBox.selectedIndex){
 var opt = listBox.options[listBox.selectedIndex]
 }
 return opt ? opt.value : null;
}

为什么这个循环的javascript数组不像文字版本那样工作？

3 个答案: