Как изменить input type="hidden" на «text» в Chrome?

Question

[Pavstyuk]

Через js меняю атрибут input с hidden на text. В Firefox все работает, в Chrome нет. Как это возможно, что посоветуете?
Что работает в FF
$('input[name="score"]').prop('type', 'text');
$('input[name="score"]').attr('type', 'text');

let inputs = document.getElementsByName('score');
let i = 0;
for (i = 0; i < inputs.length; ++i) {
    inputs[i].type = 'text';
    console.log('Input number is ' + i);
}

Ничего из этого не работает в Chrome. Да, у меня таких инпутов с одинаковым именем на странице несколько.

Comments

[Сергей]

Если ты используешь jQuery, то используй его везде! Иначе это мешанина из говнокода!

Answer 1

[alexalexes]

По идее, самым пробивным способом со времен ie6, чтобы что-то заменить в атрибуте тега было использование setAttribute:
inputs[i].setAttribute('type', 'text');

Comments

[Pavstyuk]

Проблема в том, что я даже вот это console.log('Input namber is ' + i);
в консоле не вижу. Такое ощущение, что он цикл for не хочет запускать. При это все остальное работает на странице из этого же файла со скриптом.

[Pavstyuk]

inputs[i].setAttribute('type', 'text');
Это в FF также работает.

[Pavstyuk]

Кажется я понял почему не работает потому что inputs.length == 0, то есть он не находит элементы.
Но почему? В FF все видит и все работает.

[alexalexes]

Значит, выполнение кода происходит, когда в DOM дереве нет нужных узлов.
Тут нужно разбирать последовательность обработчиков событий.
Кто создает узлы, а кто их использует. Иногда нужно разорвать операции создания узлов и их обработку через внедрение setTimeout, чтобы дать браузеру нарисовать узлы.
Иногда код обработки узлов нужно запускать после полной загрузки страницы, тогда вам помогут события.

[Pavstyuk]

alexalexes, Вот и я об этом думаю.

$(document).ready(function () {
// Мой код тут
});

Это же оно и есть.

[Pavstyuk]

alexalexes, Супер! setTimeout помогло. Задержал на 1с. - заработало. Очень интересно это все...

[alexalexes]

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

Answer 2

[Сергей]

В Опере вот это отлично работает...

$('input[name="score"]').each(function(el){
            $(this).attr("type", "text");
        });

Comments

[Сергей]

И это
$('input[name="score"]').attr('type', 'text');

[Pavstyuk]

Какая-то магия. Не работает ни в Хром ни в Опере. Проблема в том, что длина массива let inputs = document.getElementsByName('score'); равна 0.
В FF все работает. Чудеса...