Can't change css property via js?

Question

JavaScript

I am doing a training project, it is necessary to make it so that when you click on the main button mainButton, several pin markers are displayed on the field field. In the html, the template has marker styles style="display: none";
All data for the pin is loaded from the server on page load and the pin appears in the markup, but the style on style="display: block" does not change when clicked. When the data in the pin was loaded locally from the object, everything worked.
The console does not show any errors with the following code.
varfield = 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 the overlay and works great on click.
for (var i = 0; i < pin.length; i++) {
pin[i].style.display = 'block'; // doesn't work
}
}
mainButton.addEventListener('click', onButtonClick);
Tell me, please, what's wrong?

Answer 1

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

Answer 2

Find all .pin through a dynamically changing collection. This is via document.getElementsByClassName('pin')

Answer 3

Thanks for the answers, but these two methods don't work either.