Can't change css property using js?

Question

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?

JavaScript

Andy_White asked June 8th 19 at 17:24

Related questions

More answers about "Can't change css property using js?"

3 answers

travon_Bechtelar answered on · Answer 1 · 2019-06-08T17:26:37.361Z

travon_Bechtelar answered on June 8th 19 at 17:26

Try pin[i].css('display ','block');

karley.Abshi answered on · Answer 2 · 2019-06-08T17:28:37.361Z

karley.Abshi answered on June 8th 19 at 17:28

Find all .pin through a dynamically changing collection. Through this document.getElementsByClassName('pin')

Andy_White answered on · Answer 3 · 2019-06-08T17:30:37.361Z

Andy_White answered on 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