Добрый день Подскажите пож, в чем моя ошибка (знаю. В том,

что JS не учу)
есть модальное окно и несколько ссылок, которые его должны открывать.
Я присвоил им одинаковый класс и получаю их через querySelectorAll (querySelector тоже не работает)
В коллекции 2 элемента http://joxi.ru/YmEdbLdTGbG37r
Но работает только если я обращаюсь через ключ var btn = document.querySelectorAll(".openModal")[0]; и только одна ссылка понятное дело работает
приходиться писать так
var btn = document.querySelectorAll(".openModal")[0];
var btn2 = document.querySelectorAll(".openModal")[1];
и дальше так само btn2.close()...
У меня таких 5 ссылок. Как правильно это сделать ?

код лучше показывать

https://codepen.io/KitKat_zzz/pen/mdqdJRK

Уважаемый, так вы содрали код банально со stackoverflow. Устаревший и кривой )))

раз такие пироги, то не оттуда https://www.w3schools.com/howto/howto_css_modals.asp

Циклом, не?

My proposal const btns = document.getElementsByClassName('btn'); const spans = document.getElementsByClassName('close'); const modals = document.getElementsByClassName('modal'); [...btns].forEach((btn, ind) => { btn.onclick = () => (modals[ind].style.display = 'block'); }); [...spans].forEach((span, ind) => { span.onclick = () => (modals[ind].style.display = 'none'); }); window.onclick = (e) => { [...modals].forEach((modal) => { if (e.target === modal) { modal.style.display = 'none'; } }); }; If your will not use ID but just classnames instead of <button id="myBtn">Open Modal</button> <div id="myModal" class="modal"> <span class="close">×</span> just use <button class="btn">Open Modal</button> <div class="modal"> <span class="close">x</span> You can store all opening buttons within HTML collection const btns = document.getElementsByClassName('btn'); Transfer HTML collection to an array [...btns] Add onclick event to each button within array .forEach((btn, ind) => { btn.onclick = () => (modals[ind].style.display = 'block'); }); You do the same thing for span (closing button)

Код слегка устаревший, но рабочий. Можно подправить. Но и так работать должен.

var btns = document.querySelectorAll(".openModal"); btns.forEach(btn=>{ btn.onclick = function() { modal.style.display = "block"; } }) 2 изменения

Круто, работает. Спасибо большое

Спасибо. Добавлю вашу версию на будущее в заметки

почему там спреды? querySelector это решает

Потому и пишу, что устаревший. А править с телефона - дело неблагодарное ))

Могу встречный вопрос. Почему там var? За такое в коде на собесе сразу попрощаются

ладно, я думал в другом дело

хотя все равно не понятно он давал код с NodeList`ом а вы переписали в коллекции