Question

我具有以下功能，该功能在chrome中效果很好，但在IE 11中却没有。

它旨在：

采用一个questionGroup值来确定我们要为其平均得分的问题
获取页面上输入的集合
环游他们
如果“选中”了他们，则获取确定问题所在组的类名
计算我们要寻找的组中的问题数量
获取该组中所有问题的总分

将总分除以问题数量即可得出该组的平均得分

function getGroupScore(questionGroup) {
    var inputs = document.getElementsByTagName("input");
    var countOfQs = 0;
    var totalGroupScore = 0;

    for (var element in inputs) {

        if (inputs[element].checked) {

            var theQuestionsGroup = inputs[element].className;

            if (theQuestionsGroup == questionGroup) {

                var answer = parseInt(inputs[element].value)

                totalGroupScore += answer;

                countOfQs++;

            }
        }
    }

    var groupScore = totalGroupScore / countOfQs;

    return groupScore;
}

在调试中，循环似乎从未通过以下阶段：

if (inputs[element].checked)

即使选中了输入字段

我要遍历的表单示例：

<form action="">
    <table style="margin: 0 auto; border: none;" id="reschecklist">
        <tbody>
            <tr>
                <td rowspan="3" valign="top" width="400"><h3>Questions</h3></td>
                <td colspan="5" class="center"><h3>Score</h3></td>
            </tr>
            <tr>
                <td colspan="2" class="left"><strong>(not at all)</strong></td>
                <td colspan="3" align="right" class="right"><strong>(I am fully implementing this)</strong></td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td class="heading" width="400"><strong>Minimise overhead costs</strong></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="question"><p>Do you consider and identify ways to maintain machinery better and cheaper?</p></td>
                <td><input type="radio" name="q1" value="1" class="grp1" /></td>
                <td><input type="radio" name="q1" value="2" class="grp1" /></td>
                <td><input type="radio" name="q1" value="3" class="grp1" /></td>
                <td><input type="radio" name="q1" value="4" class="grp1" /></td>
                <td><input type="radio" name="q1" value="5" class="grp1" /></td>
            </tr>
            <tr>
                <td class="question"><p>Do you regularly review your overhead costs i.e. can you identify how much they cost you on a monthly, 6 monthly, annual basis?</p></td>
                <td><input type="radio" name="q2" value="1" class="grp1" /></td>
                <td><input type="radio" name="q2" value="2" class="grp1" /></td>
                <td><input type="radio" name="q2" value="3" class="grp1" /></td>
                <td><input type="radio" name="q2" value="4" class="grp1" /></td>
                <td><input type="radio" name="q2" value="5" class="grp1" /></td>
            </tr>
            <tr>
                <td class="heading" width="400"><strong>Set goals and budgets</strong></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="question"><p>Do you have a clearly set out vision and objectives for the business?</p></td>
                <td><input type="radio" name="q3" value="1" class="grp2" /></td>
                <td><input type="radio" name="q3" value="2" class="grp2" /></td>
                <td><input type="radio" name="q3" value="3" class="grp2" /></td>
                <td><input type="radio" name="q3" value="4" class="grp2" /></td>
                <td><input type="radio" name="q3" value="5" class="grp2" /></td>
            </tr>
            <tr>
                <td class="question"><p>Do you routinely (every 3-6 months), with your partner/s or your team, take a hands off view of the business and discuss objectives, performance etc?</p></td>
                <td><input type="radio" name="q4" value="1" class="grp2" /></td>
                <td><input type="radio" name="q4" value="2" class="grp2" /></td>
                <td><input type="radio" name="q4" value="3" class="grp2" /></td>
                <td><input type="radio" name="q4" value="4" class="grp2" /></td>
                <td><input type="radio" name="q4" value="5" class="grp2" /></td>
            </tr>

Answer 1

for-in不是您遍历HTMLCollection的方式。使用简单的for或one of the "array like" approaches in this answer（这也解释了为什么for-in在这里不是正确的选择）。我怀疑问题在于您遇到问题的平台上的HTMLCollection中没有可枚举的属性。

例如：

for (var element = 0 ; element < inputs.length; ++elements) {

在现代环境中，HTMLCollection（从getElementsByTagName获得的收益）可能具有非标准扩展名，使其可迭代（ES2015 +），并为其赋予了forEach。如果没有，您可以轻松添加它：

if (typeof NodeList !== "undefined" &&
    NodeList.prototype &&
    !NodeList.prototype.forEach) {
    // Yes, direct assignment is fine here, no need for `Object.defineProperty`
    NodeList.prototype.forEach = Array.prototype.forEach;
}
if (typeof HTMLCollection !== "undefined" &&
    HTMLCollection.prototype &&
    !HTMLCollection.prototype.forEach) {
    // Yes, direct assignment is fine here, no need for `Object.defineProperty`
    HTMLCollection.prototype.forEach = Array.prototype.forEach;
}

该代码同时执行HTMLCollection和NodeList（从querySelectorAll获得的内容）。然后您可以使用：

inputs.forEach(function(input) {
    if (input.checked) {
        // ...
    }
});

JS .checked在循环中无法工作...在IE11中

1 个答案: