Как применить функцию ко всем элементам с одним классом?

Question

Пытаюсь разобраться в js. Сверстал модальное окно и пытаюсь сделать так, чтобы при клике на кнопку оно открывалось, а при клике на крестик или поле вокруг него, оно закрывалось. Проблема в том, что все это работает только с id, а с классами не хочет. Я использовал getElementsByClassName и querySelectorAll, но ни в том ни в другом случае не работает. Помогите плиз!!! Ссылка на CodePen - https://codepen.io/artyg1108/pen/bGEmgXO?editors=1010

var modal = document.getElementById("myModal");
var btn = document.getElementById("mybtn");
var close = document.getElementById("myclose");

btn.onclick = function (){
  modal.style.display = "block";
};
close.onclick = function (){
  modal.style.display = "none";
};
window.onclick = function(event){
  if (event.target == modal){
    modal.style.display = "none"
  };
};

// для кнопки 2 и 3
var modalTwo = document.getElementsByClassName("modal_2var");
var btnTwo = document.getElementsByClassName("btn_2var");
var closeTwo = document. getElementsByClassName("close_2var");

btnTwo.onclick = function (){
  modalTwo.style.display = "block";
}
closeTwo.onclick = function (){
  modalTwo.style.display = "none";
}
window.onclick = function(event){
  if(event.target == modal){
    modal.style.display = "none";
  }; 
};

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0,0,0,.8);
}
.modal-content {
  background-color: #fff;
  border-radius: 10px;
  width: 500px;
  height: 200px;
}
.close {
  float: right;
  color: green;
  padding: 10px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

<button id="mybtn">Открыть модальное окно 1</button>
<div id="myModal" class="modal">
  <div class="modal-content">
  <span class="close" id="myclose">&times</span> 
    <p>Модальное окно</p>
  </div>  
</div>



<button class="btn_2var">Открыть модальное окно 2</button>
<div class="modal modal_2var">
  <div class="modal-content">
  <span class="close close_2var">&times</span> 
    <p>Модальное окно</p>
  </div>  
</div>

<button class="btn_2var">Открыть модальное окно 3</button>
<div class="modal modal_2var">
  <div class="modal-content">
  <span class="close close_2var">&times</span> 
    <p>Модальное окно</p>
  </div>  
</div>

Answer 1

Используя getElementsByClassName или querySelectorAll, вы получаете не один, а несколько элементов. Обойдите коллекцию, чтобы получить доступ к каждому найденному элементу.

<button class="button">1</button>
<button class="nebutton">2</button>
<button class="button">3</button>

<script type="text/javascript">
    
var buttons = document.querySelectorAll('.button');
for (var i = 0; i < buttons.length; ++i) {
    buttons[i].addEventListener('click', function(e) {
        alert(e.target.innerText);
    });
}


</script>

Найти ошибке в собственном коде вам поможет панель разработчика в браузере (f12). Во вкладке консоль вы увидите в чём ваша ошибка.

UPD: я поспешил с консолью. Конкретно в вашем случае не увидите, потому что вы присваиваете свойство onclick, а js позволяет присваивать несуществующие свойства и не сообщает об ошибке в этом случае.

БЛОГ НА HUSL

Как применить функцию ко всем элементам с одним классом?

Ответы (1 шт):