Can't change css property using js?

Doing an academic project, you need to make it so that when clicking on the main button mainButton on the field field is displayed multiple pin markers pin. In the html template written in marker styles style="display: none";
All the data for pin loaded from the server when the page loads and pin appear in the markup, but the style to style="display: block" when clicking does not change. When the data in pin loaded locally from the object, everything worked.
The console with the following code, no error shows.

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

function onButtonClick() {
field.classList.remove('field--faded'); // this line of code hides overlay and works fine when clicked.
for (var i = 0; i < pin.length; i++) {
pin[i].style.display = 'block'; // not working
}
}
mainButton.addEventListener('click', onButtonClick);
Tell me, please, what's wrong?
June 8th 19 at 17:24
3 answers
June 8th 19 at 17:26
Try pin[i].css('display ','block');
June 8th 19 at 17:28
Find all .pin through a dynamically changing collection. Through this document.getElementsByClassName('pin')
June 8th 19 at 17:30
Thanks for the replies, but don't work these two methods, too.
try every time you click then look for these .pin. so
var field = document.querySelector('.field');
var mainButton = document.querySelector('.main-button');


function onButtonClick() {
var pin = document.querySelectorAll('.pin');
field.classList.remove('field--faded'); // this line of code hides overlay and works fine when clicked.
for (var i = 0; i < pin.length; i++) { 
pin[i].style.display = 'block'; // not working
}
}
mainButton.addEventListener('click', onButtonClick);
- karley.Abshi commented on June 8th 19 at 17:33
Works, thank you. - Andy_White commented on June 8th 19 at 17:36

Find more questions by tags JavaScript