Не получается изменить css-свойство через js?

Question

[lopyx]

Делаю учебный проект, необходимо сделать так, чтобы при клике по главной кнопке mainButton, на поле field отображались несколько пин-маркеров pin. В html в template прописаны стили маркеров style="display: none";
Все данные для pin подгружаются с сервера при загрузке страницы и pin появляются в разметке, но стиль на style="display: block" при клике не меняется. Когда данные в pin подгружались локально из объекта, все работало.
Консоль при следующем коде никаких ошибок не показывает.

var field = document.querySelector('.field');
var mainButton = document.querySelector('.main-button');
var pin = document.querySelectorAll('.pin');

function onButtonClick() {
field.classList.remove('field--faded'); // эта строчка кода скрывает оверлэй и прекрасно работает при клике.
for (var i = 0; i < pin.length; i++) {
pin[i].style.display = 'block'; // не работает
}
}
mainButton.addEventListener('click', onButtonClick);
Подскажите, пожалуйста, что не так?

Comments

[Andrey Tsvetkov]

есть вероятность что на момент определения переменной pin данных дивов ещё не существует. Попробуйте создавать данную переменную в функции обработчике клика

Answer 1

[I'm Yoda]

Попробуйте pin[i].css('display ','block');

Answer 2

[Александр Косицын]

Найдите все .pin через динамически меняющуюся коллекцию. Это через document.getElementsByClassName('pin')

Answer 3

[lopyx]

Спасибо за ответы, но не работают эти два метода тоже.

Comments

[Александр Косицын]

попробуй при каждом клике тогда искать эти .pin. вот так

var field = document.querySelector('.field');
var mainButton = document.querySelector('.main-button');


function onButtonClick() {
var pin = document.querySelectorAll('.pin');
field.classList.remove('field--faded'); // эта строчка кода скрывает оверлэй и прекрасно работает при клике.
for (var i = 0; i < pin.length; i++) { 
pin[i].style.display = 'block'; // не работает
}
}
mainButton.addEventListener('click', onButtonClick);

[lopyx]

Александр Косицын, Работает, спасибо.