Почему в одном случае htmlcolletction выводит динамически добавленные элементы, а в другом случае нет?

Question

[gazes12]

Здравствуйте.
Я хочу получать динамически добавленные элементы с помощью HTMLcollection, пишу так:

let statusesCollection;

                statusesCollection = document.getElementsByClassName('recall__people-fio-status');
                for(let status of statusesCollection){
                    console.log(status) /*Выводятся все элементы и добавлены динамически в том числе*/
                }

Все работает, динамически добавленные элементы тоже записываются в коллекцию, ну я хочу получить только те элементы которые имеют определенное значение атрибута, пишу так:

let statusesCollection;
                statusesCollection = document.getElementsByClassName('recall__people-fio-status');
                for(let status of statusesCollection){
                    if(status.getAttribute('data-userId') == result){
                        console.log(status); /*Выводятся только элементы которые были инициализированные при загрузке js скрипта (добавлены не динамически) */
                    };
                }

Comments

[Lynn «Кофеман»]

Что-то ничего не понятно. Что работает? Что не работает?

[ForSureN1]

а result это соб-но что ?

[gazes12]

Lynn «Кофеман», Изменил вопрос на более понятный.

[gazes12]

ForSureN1, Изменил вопрос на более понятный.

[ForSureN1]

gazes12, ии? скрипт выполнился 1 раз при загрузке страницы, что вы дальше хотите от него ?

[Lynn «Кофеман»]

Если скрипт выполняется чаще чем один раз, то неплохо бы написать при каких условиях это происходит.

[gazes12]

Lynn «Кофеман»,

$(document).ready(() =>{


    let statusesCollection;



    let counter = 0;

    function setOnline(){
        console.log('Онлайн');
        $.ajax({
            type: 'POST',
            url: '../php/update_status.php',
            data: {
                action: 1,
            },

            success: function(result){
                statusesCollection = document.getElementsByClassName('recall__people-fio-status');
                for(let status of statusesCollection){
                   if(status.getAttribute('data-userId') == result){
                    status.classList.remove('offline'); 
                    status.classList.add('online');
                };
                }
            }
        });
    }

    function setOffline(){
        console.log('Оффлайн');
        $.ajax({
            type: 'POST',
            url: '../php/update_status.php',
            data: {
                action: 0,
            },

            success: function(result){
                statusesCollection = document.getElementsByClassName('recall__people-fio-status');
                for(let status of statusesCollection){
                    if(status.getAttribute('data-userId') == result){
                        status.classList.remove('online'); 
                        status.classList.add('offline');
                    };
                }
                
            },
        });
    }

    function incrementCounter(){
        counter++;
        console.log(counter);

        if(counter >= 3){
            setOffline();
        }else{
            setOnline();
        }
    }
    

    let interval = setInterval(incrementCounter, 1000);

    incrementCounter();

    $(this).mousemove(() => counter = 0);
    $(this).keypress(() => counter = 0);
    $(this).touchstart(() => counter = 0);
    $(this).touchend(() => counter = 0);
    $(this).touchcancel(() => counter = 0);
    $(this).touchmove(() => counter = 0);
});

[ThunderCat]

for(let status of statusesCollection){
     console.log(status); //точно выбираются, и точно есть атрибут?
     if(status.getAttribute('data-userId') == result){
         console.log(status); /*Выводятся только элементы которые были инициализированные при загрузке js скрипта (добавлены не динамически) */
     };
};

[gazes12]

ThunderCat, Да, выбираются. Этот код не срабатывает на динамически добавленные элементы:

if(status.getAttribute('data-userId') == result){
         console.log(status); /*Выводятся только элементы которые были инициализированные при загрузке js скрипта (добавлены не динамически) */
     };

То есть, после перезагрузки страницы будет все отлично работает, ну если я добавлю элемент, то этот код на него не действует:

if(status.getAttribute('data-userId') == result){
         console.log(status); /*Выводятся только элементы которые были инициализированные при загрузке js скрипта (добавлены не динамически) */
     };

[Сергей Сергей]

не вижу setAttribute.

[gazes12]

Сергей Сергей, Атрибут имеется, он добавляется в другом js файле.

[ThunderCat]

gazes12, if(status.getAttribute('data-userId') == result){тут вы проверяете наличие атрибута, а не наличие элемента в списке. Я не про это спрашивал, и четко написал код для проверки.

[Сергей Сергей]

так пусть

document.querySelectorAll( '.recall__people-fio-status[data-userId=" +result+ "]' );

Answer 1

[gazes12]

Проблема была в атрибуте, я случайно атрибут прописал в классах :) Всем спасибо!