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

Привет мир!

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

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"
       }
   )

У Ubivectel там разные селекторы... ;)

Нет. Не одно и то же. :no:
У тебя всякий раз разный набор селекторов

#scolor -> #KIDE_opciones, .overlayo
.overlayo -> .KIDE_mostrar, .overlayo
#kide_x_s, #KIDE_mensaje_borrar -> .overlayo

Автор не дает нам шанс проверить... :(
Предложу такой вариант.

let scolor = document.querySelectorAll('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar').forEach(el => {
	const a = ['.overlayo']
	if (el.id === 'scolor') a.push('#KIDE_opciones')
	if (el.classList.contains('overlayo')) a.push('.KIDE_mostrar')
	const val = a.join(', ')
	el.onclick = function () {
		document.querySelectorAll(val).forEach(elem => elem.style.display = "none");
	};
})

Тоже не срабатывает, постараюсь более внятно выложить фрагменты кода, это не так просто, поскольку это разные модальные окна и их код раскидан по разнам файлам. Так-то сейчас работает все, но не могу в себе подавить бунт перфекционизма )))))

Проверить тут: https://noviy-kovcheg.ru/chat этот код закрывает модальные окна "цвет" и при правом клике на ник в окне сообщений

Ураааа! Заработало! Всем спасибо товарищи, пошел "курить" как именно все работает. :dance: