Оптимизировать код
 

Привет мир!

Имеется конструкция скрывающая модальные окна и их оверлей. Вот такая:

let scolor = document.querySelector('#scolor');
    scolor.onclick = function () {
        document.querySelectorAll('#KIDE_opciones, .overlayo').forEach(elem => elem.style.display = "none");
      
    };

    let most = document.querySelector('.overlayo');
    most.onclick = function () {
        document.querySelectorAll('.KIDE_mostrar, .overlayo').forEach(elem => elem.style.display = "none");
    };

    let kidemens = document.querySelector('#kide_x_s');
    kidemens.onclick = function () {
        document.querySelector(".overlayo").style.display = "none";
    };

    let kborrar = document.querySelector('#KIDE_mensaje_borrar');
    kborrar.onclick = function () {
        document.querySelector(".overlayo").style.display = "none";
    };

Все работает, но перфекционизм негодует, 4 переменные для одной и той же функции наверное дико, попытался записать в одну добавив цикл:

let scolor = document.querySelectorall('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar').forEach(el) =>;
    scolor.onclick = function () {
        document.querySelectorAll('#KIDE_opciones, .overlayo, .KIDE_mostrar, ').forEach(elem => elem.style.display = "none");
    };

Явно блуждаю в синтаксисе, но уже по всякому перепробовал. Можно ли заставить это работать?

Ubivectel,
если окна однотипные, должно быть примерно так.

let modal = document.querySelectorAll('.modal');
let btn = document.querySelectorAll('.btn');
btn.forEach((el, i) => el.addEventListener('click', () => modal[i].style.display = "none"));

Привет рони :victory:

Нет, не прокатывает, там в том и заморочка, что кругом разные селекторы '.modal' и '.btn' не присутствуют на нужных элементах. А дописывать им классы чревато тем, что они "подхватят/" лишние стили

Ubivectel,
впишите ваши селекторы в предложенный код или сделайте минимальный макет

Однако весь моск поломал, но этот код работает:

let scolor = document.querySelector('#scolor');
    scolor.onclick = function() {
        document.querySelectorAll('#KIDE_opciones, .overlayo').forEach(elem => elem.style.display = "none");
        
    };

    let most = document.querySelector('.overlayo');
    most.onclick = function() {
        document.querySelectorAll('.KIDE_mostrar, .overlayo').forEach(elem => elem.style.display = "none");
        
    };

    let kidemens = document.querySelector('#kide_x_s');
    kidemens.onclick = function() {
        document.querySelector(".overlayo").style.display = "none";
    };

    let kborrar = document.querySelector('#KIDE_mensaje_borrar');
    kborrar.onclick = function() {
        document.querySelector(".overlayo").style.display = "none";
    };

А этот нет:

let scolor = document.querySelectorall('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar').forEach(el) =>;
        scolor.onclick = function () {
            document.querySelectorAll('#KIDE_opciones, .overlayo, .KIDE_mostrar,').forEach(elem => elem.style.display = "none");
        };

Вроде ведь одно и то же, что не так делаю :(

И так не работает

let modals = document.querySelectorAll('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar');
    let btns = document.querySelectorAll('#KIDE_opciones, .overlayo, .KIDE_mostrar,');
    btns.forEach((el, i) => el.addEventListener('click', () => modals[i].style.display = "none"));

Дык писали тебе выше...

Да я не дорос до таких слов )

Ubivectel,

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Так наверно должно быть

document.querySelectorall('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar')
  .forEach( el =>  {
        el.onclick =  () => el.style.display = "none"
       }
   )