javascript - JS .checked 在 for ... in 循环中不起作用 - 在 IE11 中

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>

标签： javascriptloopsinternet-explorer-11

Answer 1

for-in不是您循环浏览 HTMLCollection 的方式。在这个答案中使用简单的for或“类似数组”的方法之一（这也解释了为什么for-in这里不是正确的选择）。HTMLCollection我怀疑问题在于您看到问题的平台上没有可枚举的属性。

例如：

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

在现代环境中，HTMLCollection（您getElementsByTagName从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) {
        // ...
    }
});