Как добавить несколько EventListeners в одну функцию для разных кнопок? - PullRequest
Новая
       17

Как добавить несколько EventListeners в одну функцию для разных кнопок?

0 голосов
/ 02 апреля 2020 
const nbaLoads = () => {
  fetch('nba.json')
  .then(res => res.json())
  .then(data => {

    let output = '';

    data.forEach(s => {
        if(s.year === parseInt(select.value)){
         output += `
        <img src="" width= 100px; height=100px>
        <h4>CHAMPIONS: ${s.champion}</h4>
      `
    } if(s.year === parseInt(select.value)){
        output += `
        <img src="" width= 100px; height=100px>
        <h4>RUNNER UP: ${s.runnerUp}</h4>
      `
    }
    });
    document.querySelector('#output').innerHTML = output;
  })
};

champion.addEventListener('click', nbaLoads);
runnerUp.addEventListener('click', nbaLoads);

если я нажму на кнопку чемпионов, мой результат будет чемпионом и занявшим второе место, если я нажму на кнопку занявшего второе место, то же самое, как это изменить? я хочу видеть чемпионов, когда я нажимаю кнопку чемпиона и runnerUp, когда я нажимаю runnerUp.

заранее спасибо

1 Ответ

0 голосов
/ 07 апреля 2020

Вы вызываете одну и ту же функцию нажатием обеих кнопок. Вам нужно либо предоставить аргумент, который должен указать, какой тип информации вы должны установить на innerHTML, либо создать две разные функции.

Первое решение: 

const nbaLoads = (type) => {
  fetch('nba.json')
  .then(res => res.json())
  .then(data => {

    let output = '';

    data.forEach(s => {
        if(s.year === parseInt(select.value) && type == "champions"){
         output += `
        <img src="" width= 100px; height=100px>
        <h4>CHAMPIONS: ${s.champion}</h4>
      `
    } if(s.year === parseInt(select.value) && type == "runnerUp"){
        output += `
        <img src="" width= 100px; height=100px>
        <h4>RUNNER UP: ${s.runnerUp}</h4>
      `
    }
    });
    document.querySelector('#output').innerHTML = output;
  })
};

champion.addEventListener('click', () => nbaLoads("champions"));
runnerUp.addEventListener('click', () => nbaLoads("runnerUp"));

Второе решение: 

const nbaLoads = () =>
  fetch('nba.json')
  .then(res => res.json());

const loadChampion = () =>
  nbaLoads()
  .then(data => {
    let output = '';

    data.forEach(s => {
      if (s.year === parseInt(select.value)) {
        output += `
        <img src="" width= 100px; height=100px>
        <h4>CHAMPIONS: ${s.champion}</h4>
      `;
      }
    });

    document.querySelector('#output').innerHTML = output;

  });

const loadRunnerUp = () =>
  nbaLoads()
  .then(data => {
    let output = '';

    data.forEach(s => {
      if (s.year === parseInt(select.value)) {
        output += `
        <img src="" width= 100px; height=100px>
        <h4>RUNNER UP: ${s.runnerUp}</h4>
      `;
      }

      document.querySelector('#output').innerHTML = output;

    });
  });

champion.addEventListener('click', loadChampion);
runnerUp.addEventListener('click', loadRunnerUp);
...