Почему не срабатывает JS код?

Question

[Floopy14]

Нужно с помощью JSa убирать попап. Сразу говорю, JS никогда не учил, написал с помощью документации. Задача: по нажатию кнопки close закрывать попап.

<div class="popup" id="mymodal">
<div class="popup-content">
            <div class="popup-title"></div>
            <div class="popup-text">Уважаемый гость,
сумма Вашего заказа составляет<br><br>Укажите адрес доставки, контактные данные.
Необходимые Вам дату и время доставки
внесите в поле «Время доставки - Указать время».
Если до доставки остаётся более 24 часов,
наценка за срочность не будет применена и
заявленная итоговая стоимость не изменится.
Разумеется, скидки сохранятся в любом случае
</div>
<input type="button" class="close" value="Понятно">
    </div>
    </div>
</div>

И тут же маленький скриптик:

var modal = document.getElementById("mymodal");
var btn = document.getElementsByClassName("close");

	btn.onclick = function(modal) {
		modal.style.display = "none";
	}

В консоли ошибок нет, но при нажатии на кнопку display на none не сменяется.

Answer 1

[Rsa97]

getElementsByClassName возвращает коллекцию элементов. Соответственно, onclick вы присваиваете этой коллекции, а не кнопке. Берите btn[0] или, если кнопок несколько, то назначайте обработчик в цикле.

Comments

[Floopy14]

Не могли бы подсказать, как это исп-ть в коде? Как я написал, JS никогда не учил и мало что понял из вашего текста, кроме того, что написал не правильно :))

[Кирилл Горелов]

Floopy14,
btn['0'].onclick = function(modal) {
modal.style.display = "none";
}

[Floopy14]

Кирилл Горелов, Тоже не работает.

[Floopy14]

Кирилл Горелов, в консоли ошибка: Uncaught TypeError: modal.style is undefined

[Кирилл Горелов]

Floopy14,

var btn = document.getElementsByClassName("close");

  btn['0'].onclick = function() {
    document.getElementById('mymodal').style.display = "none";
  }
  
  
  //или
var btn = document.getElementsByClassName("close");
    btn['0'].onclick = function() {
  var modal = document.getElementById("mymodal");
    close(modal);
  }
  
  function close(modal){
     modal.style.display = "none";
  }

[Floopy14]

Кирилл Горелов, Странно. У меня попап открывается при загрузке страницы, и теперь, с этим скриптом он открывается и через секунду сам закрывается

[Кирилл Горелов]

Floopy14, так сказать сложно почему оно само показывается и закрывается самостоятельно