Не находит элемент в блоке?

Question

[David5]

Добрый день.
У меня есть данная функция

function search_input_value(e){


                if (event.target.value.includes('*')){


                    event.target.value = event.target.value.slice(0, -1);

                    document.querySelectorAll('#btn_search')[0].click();
                    event.target.value = '';

                    
                    var all = document.querySelectorAll('#items2');
                    for (var i=0, max=all.length; i < max; i++) {
                        console.log(all[i].querySelectorAll('.tovar_name')[0])
                    }
                }}

после выполнения клика document.querySelectorAll('#btn_search')[0].click();
в блок добавляется контент опреденный(его добавляет другая функция, она вызвается при клике)

но цикл который выполняется после, не находит данный контент, хотя на сайте блок выводится.
Заранее благодарю

Comments

[Вадим]

document.querySelectorAll('#btn_search')[0].click();

Избыточная запись, так как селектор по id, а id должен быть уникальным в рамках страницы, то есть априори должен быть только один элемент. То есть тут релевантнее использование document.querySelector('#...').

Это и нужно исправить дальше в коде. var all = document.querySelectorAll('#items2'); - та же проблема. А когда одинаковый idшник на странице больше одного, то поведение может быть непредсказуемым. То есть искать нужно, например, по классу.

[Вадим]

а ещё вопрос

в блок добавляется контент опреденный(его добавляет другая функция, она вызвается при клике)

как добавляется? Вы уверены что контент успевает появиться перед тем, как он начинает искаться в следующих строчках?

[David5]

Вадим, не уверен, но по сути, клик отработал в блок добавилась информация, далее перебираем в цикле.
Только вот я добавил в функцию которая отрабатыает при клике мыши console.log(123), но этого в консоле не отображается, а если нажать в браузере на эту кнопку то выводится, как это фиксить, не подскажите?

[Вадим]

David5, для начала сделать воспроизводимый пример на codepen.io, прикрепить ссылку на демку и там уже будем смотреть. В угадайку играть что и как у Вас сделано - дело не благодарное.

[David5]

согласен, сейчас исправлю

[David5]

https://codepen.io/david-3/pen/NWLVqLv

[coderisimo]

Хотел помочь, открыл демку , ничего понял (. Там куча ненужного кода, а суть проблемы не показана.
Напишите простой пример , буквально 20 строчек, который изолированно воспроизводит проблему и шансы получить подсказку существенно повысятся.

[David5]

function search_input_value(e){
                

                if (event.target.value.includes('*')){
                    

                    event.target.value = event.target.value.slice(0, -1);

                    document.querySelectorAll('#btn_search')[0].click();
                    event.target.value = '';

                
                    var all = document.querySelectorAll('#items2');
                    for (var i=0, max=all.length; i < max; i++) {
                        console.log(all[i].querySelectorAll('.tovar_name')[0])
                    }
            
                }}

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

[David5]

Короче помог чат gpt, нейронки тащат))

function search_input_value(e){
                    if (event.target.value.includes('*')){
                        var all = document.querySelectorAll('#items2 tr');
                        if (all.length){
                            for (var i=0, max=all.length; i < max; i++) {
                                all[i].remove();
                            }
                        }

                        event.target.value = event.target.value.slice(0, -1);

                        document.querySelectorAll('#btn_search')[0].click();
                        event.target.value = '';

                        var items2 = document.querySelectorAll('#items2');
                        var observer = new MutationObserver(function(mutationsList) {
                            for(var mutation of mutationsList) {
                                if (mutation.type === 'childList') {
                                    var all = document.querySelectorAll('#items2');
                                    for (var i=0, max=all.length; i < max; i++) {
                                        console.log(all[i].querySelectorAll('.tovar_name')[0].click());
                                    }
                                }
                            }
                        });
                        observer.observe(items2[0], { attributes: false, childList: true, subtree: false });
                    }
                }

суть в том что js в браузере рендерит асинхронно, и цикл выполняется пока блок еще не добавлен, нужно использовать колбеки или промиси, как-то так)

[David5]

а так он дожидается пока блок создаться, а потом шлифует циклом

[daedra93]

пока такой код пишет нейронка можно не боятся за работу)

Answer 1

[robodead]

Скорее всего проблема с тем, что DOM-дерево еще не обновилось на тот момент
Операции с дом очень тяжелые, поэтому выполняются в последнюю очередь
Можете попробовать запихнуть цикл в

setTimeout(()=>{
for ... 
}, 0)

Это сделает из вашего цикло (микрозадачи) макрозадачу