Как мне вызвать forEach в addEventListener?

#javascript #arrays

Вопрос:

У меня есть массив объектов с именами и оценками некоторых учеников. Я должен отсортировать их в порядке убывания, который у меня есть, используя метод forEach, однако я не могу понять, как вызвать его в addEventListener, чтобы при нажатии кнопки в моем браузере отображались имя и оценки учащихся. В HTML-документе у меня есть только один пустой абзац с идентификатором «#демонстрация» и кнопка с идентификатором «#showStudents», которая должна отображать имена и оценки в пустом абзаце при нажатии. Ниже я прикрепил код:

 const studentsOrder = document.getElementById("demo");
const showStudents = document.getElementById("showStudents");

const students = [
  {
    name: "Michael",
    grade: 9,
  },

  {
    name: "Tom",
    grade: 6,
  },

  {
    name: "Lisa",
    grade: 8,
  },

  {
    name: "Ron",
    grade: 5,
  },

  {
    name: "Daniel",
    grade: 3,
  },

  {
    name: "John",
    grade: 2,
  },

  {
    name: "Louise",
    grade: 7,
  },
];

students.sort((a, b) => b.grade - a.grade);

students.forEach((e) => {
  console.log(`${e.name} ${e.grade}`);
});

1. Поместите код в прослушиватель событий и заставьте его обновлять DOM с результатом вместо использования console.log() . С какой частью этого у тебя проблемы?

2. Где HTML и код, пытающийся его изменить? Прямо сейчас это выглядит так, как будто вы просите кого-то написать это за вас. Мы бы предпочли научить вас, что не так с тем, что вы пробовали.

3. @Barmar, вот с чем у меня проблемы: я не могу понять, как поместить код в прослушиватель событий вместо использования console.log().

4. @Teodor-MihaiAvasilcai Ваш существующий код даже не пытается изменить DOM или установить четный прослушиватель. studentsOrder.addEventListener('click', ()=> students.forEach((e) => { showStudents.innerHTML = `${e.name} ${e.grade} <br />`); }); Это очень грубо… просто чтобы ты начал

5. @Teodor-MihaiAvasilcai ты видел мой ответ?

Ответ №1:

На основе ваших комментариев вам придется прикрепить слушателя к кнопке #showStudents и показать их в #demo

 const studentsOrder = document.getElementById("demo");
const showStudents = document.getElementById("showStudents");

const students = [{
    name: "Michael",
    grade: 9,
  },

  {
    name: "Tom",
    grade: 6,
  },

  {
    name: "Lisa",
    grade: 8,
  },

  {
    name: "Ron",
    grade: 5,
  },

  {
    name: "Daniel",
    grade: 3,
  },

  {
    name: "John",
    grade: 2,
  },

  {
    name: "Louise",
    grade: 7,
  },
];

students.sort((a, b) => b.grade - a.grade);
showStudents.addEventListener('click', () => {
  studentsOrder.innerHTML = ''
  students.forEach(e => studentsOrder.innerHTML  = `${e.name} ${e.grade} <br />`);
})

 <button id="showStudents">Show Students</button>

<div id="demo"></div>

Однострочным решением может быть использование метода reduce (), что-то вроде этого:

 const studentsOrder = document.getElementById("demo");
const showStudents = document.getElementById("showStudents");

const students = [{
    name: "Michael",
    grade: 9,
  },

  {
    name: "Tom",
    grade: 6,
  },

  {
    name: "Lisa",
    grade: 8,
  },

  {
    name: "Ron",
    grade: 5,
  },

  {
    name: "Daniel",
    grade: 3,
  },

  {
    name: "John",
    grade: 2,
  },

  {
    name: "Louise",
    grade: 7,
  },
];

students.sort((a, b) => b.grade - a.grade);
showStudents.addEventListener('click', () => studentsOrder.innerHTML = students.reduce((accumulator, student) => `${accumulator} <br /> ${student.name} ${student.grade}`, ''))

 <button id="showStudents">Show Students</button>

<div id="demo"></div>

1. Может потребоваться сначала очистить DIV, чтобы он не дублировался каждый раз.

2. Нет необходимости сортировать массив каждый раз, когда вы нажимаете кнопку

3. @JuanMendes это правда, исправлено

4. Поскольку вы взяли на себя ответ, последнее предложение состоит в том, чтобы избегать воссоздания DOM для каждой итерации ( установите HTML одним кадром) :p и превратите его в одну строку. studentsOrder.innerHTML = students.reduce((str, student) => `${str} <br /> ${student.name} ${student.grade}`, '')

5. Да, это было бы хорошим «обновлением», скажем 😉 Я добавлю это к своему ответу