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?
3 answers
Try pin[i].css('display ','block');
Find all .pin through a dynamically changing collection. Through this document.getElementsByClassName('pin')
Thanks for the replies, but don't work these two methods, too.
Find more questions by tags JavaScript
- karley.Abshi commented on June 8th 19 at 17:33