JS .checked не работает в for ... в цикле - в IE11 - PullRequest
0 голосов
/ 02 марта 2019

У меня есть следующая функция, которая прекрасно работает в 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>

1 Ответ

0 голосов
/ 02 марта 2019

for-in это не то, как вы проходите через HTMLCollection.Используйте простой for или один из подходов типа «массив» в этом ответе (который также объясняет, почему 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) {
        // ...
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...