Зачем две функции?

Question

[Андрей Кузнецов]

Код написал - работает,но зачем здесь 2 функции не пойму.Вопрос ,что делает первая стрелочная функция? И можно-ли как-то сократить запись?

peresortDel.forEach(el => {
  el.onclick = function() {
    peresortcontent.style.display = 'none';
  }});

Comments

[Вадим]

Вопрос ,что делает первая стрелочная функция?

Не пойму что Вы не можете понять. Вы не знаете как работает forEach? Или в чём вопрос?

И можно-ли как-то сократить запись?

Можно, использовав 2 стрелочные функции.

peresortDel.forEach(el => el.onclick = () => peresortcontent.style.display = 'none');

[Андрей Кузнецов]

Отлично,Вы настоящий js-программист

[Андрей Кузнецов]

Вадим, Очень понравился Ваш ответ,хотел-бы поучится даете уроки?

[Вадим]

Андрей Кузнецов, ну вы список вопросов задавайте, что знаю объясню

[Вадим]

Андрей Кузнецов, Ну, собственно, это логично, что не удаляет. Обработчик у Вас есть же только на добавление:

if (item.checked) {
        const punkt = document.createElement('p');
          punkt.className = 'p_punkt';
          contentLine.append(punkt);

Возможных алгоритмов решения на самом деле можно придумать несколько. Но суть, в целом, будет одна.
Нам нужно хранилище данных, на основе которых будет происходить отрисовка.
А по срабатыванию выбранного тригера - делать перерисовку.

В данном случае, в качестве хранилища, у Вас выступают HTML элементы чекбоксы, хранящиеся в checkBoxses.
Тригером перерисовки выступает клик по кнопки "Применить."

Вы в шаге от решения своей задачи.
Первой строчкой в обработчике клика нужно отчищать имеющуюся в conentLine разметку.
То есть: contentLine.innerHTML = "".
А потом Ваш уже написанный код снова сгенерирует разметку на основе только выбранных чекбоксов.

Ещё более оптимально будет не отчищать разметку, а генерировать новую и замещать текущую за одну операцию вставки. Даже сейчас у Вас идёт несколько операций изменения DOM (append в цикле). А работа с DOM одна из наиболее медленных операций в браузере.

Статья по теме: https://learn.javascript.ru/modifying-document
documentFragment - поможет с более оптимальным решением. Но так как элементов у Вас там не много, эта оптимизация может быть преждевременной. То есть Ваши затраты на неё будут больше, чем оно того стоит.

[Андрей Кузнецов]

Вадим, Получилось,очень помогло Ваше объяснение

function fioContent() {
  const resMassiv = [];
  for (let i = 0; i < checkBoxses.length; i++) {
    const element = checkBoxses[i];
    if (element.checked) {
      const li = document.createElement('li');
      li.className = 'li_punkt';
      li.append(element.value);
      resMassiv.push(li);
    } 
  }
  return resMassiv

};

btnSafe.addEventListener('click', () => {
    contentLine.innerHTML = '';
    contentLine.append(...fioContent()); 
    popContent2.style.display = 'none';
});

[Вадим]

Андрей Кузнецов, отлично.
Обращайтесь

Answer 1

[Денис Инешин]

Обычная проблема, пытаетесь писать сокращенный код до того как поняли что происходит.

Я бы рекомендовал вначале писать максимально развернуто и только потом сокращать по мере надобности.

// метод forEach на каждый найденный элемент вызывает функцию, куда первым аргументом передает ссылку на этот элемент
peresortDel.forEach(foreachCallbak);

function foreachCallbak(el) {
  el.onClick = onClickCallback;
}

function onClickCallback() {
  peresortcontent.style.display = 'none';
}

Comments

[Андрей Кузнецов]

// метод forEach на каждый найденный элемент вызывает функцию, куда первым аргументом передает ссылку на этот элемент.Все предельно понятно для чего первая функция.Благодарю

Answer 2

[Сергей Соколов]

Что происходит
Каждому элементу коллекции peresortDel вешается слушатель события клика.

Каким образом

1. Внутрь forEach() передается функция, которую применят к каждому элементу.
   
2. Слушатель события click — тоже функция. Другая, чем в п.1, поэтому их тут.. две.
   

Как быть
Чтобы короче — можно повесить всего один слушатель не на каждый элемент, а на общего родителя где-то выше. Это позволит сэкономить на функции в forEach(), и не создавать новую функцию для каждого элемента.

commonParent.addEventListener('click', ({ target }) => {
  if (!target.classList.contains("tot-samyj-class")) return;
  target.style.display = "none";
});

Подробнее не подскажу, т.к. в вопросе нет действующего примера или хотя бы разметки.