如何在一个函数中为不同的按钮添加多个事件监听器？

Question

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);

if i click on champions button my result is champions and runner up if i click on runner up button its same, how to change it? i want to see champions when i click on champion button and runnerUp when i click runnerUp.

thanks in advance

Answer 1

You are calling the same function on both buttons click. You need either provide an argument which should indicate what type of information should you set to innerHTML , or create two different functions.

First solution:

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

Second solution:

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);