Как сделать так, чтобы одна функция работала с несколькими кнопками HTML?

Question

Я создаю этот инструмент сравнения размеров только для практики, так как я новичок в JS.У меня есть несколько кнопок в моем HTML-файле (по одной для каждого размера США), которые после нажатия должны вернуть соответствующий размер Великобритании, ЕС и CM внутри некоторого пустого <div>, который я создал.

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

const sizeAll = [
   {  US: 4,     UK: 3.5,   EU: 36,     CM: 22    },
   {  US: 4.5,   UK: 4,     EU: 36.5,   CM: 22.5  },
   //other size objects removed from here
   {  US: 14,    UK: 13,    EU: 48.5,   CM: 32    }   
];  


let sizeFour = document.getElementById('Four');
let sizeFourPointFive = document.getElementById('FourPointFive');

//all the other sizes removed from here

let sizeFourteen = document.getElementById('Fourteen');

let us = document.getElementById('current');
//uk
let uk = document.getElementById('uk');
let ukNumber = document.getElementById('ukNumber');
//eu
let eu = document.getElementById('eu');
let euNumber = document.getElementById('euNumber');
//cm
let cm = document.getElementById('cm');
let cmNumber = document.getElementById('cmNumber');


const comparison4 = () => {
   us.textContent = 'US' + ' ' + sizeFour.value + ':';
   uk.textContent = 'UK';
   ukNumber.textContent = sizeAll[0].UK;
   eu.textContent = 'EU';
   euNumber.textContent = sizeAll[0].EU;
   cm.textContent = 'CM';
   cmNumber.textContent = sizeAll[0].CM;
};

sizeFour.addEventListener('click', comparison4);

<div class="buttons">
       <button id='Four' value="4">4</button>
       <button id='FourPointFive' value="4.5">4.5</button>
<!--I took out all the other buttons just for code exhibit purpose-->      
       <button id='Fourteen' value="14">14</button>
</div>

<div>
       <h2 id="current"></h2>
           <h3 id="uk"></h3>
               <p id="ukNumber"></p>
           <h3 id="eu"></h3>
               <p id="euNumber"></p>
           <h3 id="cm"></h3>
               <p id="cmNumber"></p>          
</div>

Если я повторяю этот процесс (comparison45(), comparison5() и т. Д.) В моем файле JS 21 раз (количество моих кнопок), все работает, но чтобы избежать повторения этого процесса, как я могу сделать этот код эффективным?

Answer 1

Самый простой способ использовать IMO - использовать аргумент event, переданный обратному вызову addEventListener, в частности, event.target, который является ссылкой на кнопку, по которой была нажата кнопка для запуска события.Если вы сделаете это, вам не нужно будет сохранять явные ссылки на переменные для каждой кнопки в вашем коде.Как то так:

const sizeAll = [{
  US: 4,
  UK: 3.5,
  EU: 36,
  CM: 22
}, {
  US: 4.5,
  UK: 4,
  EU: 36.5,
  CM: 22.5
}, {
  US: 14,
  UK: 13,
  EU: 48.5,
  CM: 32
}];

let us = document.getElementById('current');
let uk = document.getElementById('uk');
let ukNumber = document.getElementById('ukNumber');
let eu = document.getElementById('eu');
let euNumber = document.getElementById('euNumber');
let cm = document.getElementById('cm');
let cmNumber = document.getElementById('cmNumber');

//Take advantage of the event argument that the browser passes to the addEventListener callback
const comparison = (e) => {
  //e.target.value is a reference to the button that was clicked to trigger the event
  const [sizeEl] = sizeAll.filter(size => size.US == e.target.value);
  //As a side note: there may be a better way to structure your data so you dont have to filter to find the correct array object - but for now this works

  us.textContent = 'US' + ' ' + sizeEl.US + ':';
  uk.textContent = 'UK';
  ukNumber.textContent = sizeEl.UK;
  eu.textContent = 'EU';
  euNumber.textContent = sizeEl.EU;
  cm.textContent = 'CM';
  cmNumber.textContent = sizeEl.CM;
};

document.querySelector('#Four').addEventListener('click', comparison);
document.querySelector('#FourPointFive').addEventListener('click', comparison);
document.querySelector('#Fourteen').addEventListener('click', comparison);

<div class="buttons">
  <button id='Four' value="4">4</button>
  <button id='FourPointFive' value="4.5">4.5</button>
  <!--I took out all the other buttons just for code exhibit purpose-->
  <button id='Fourteen' value="14">14</button>
</div>

<div>
  <h2 id="current"></h2>
  <h3 id="uk"></h3>
  <p id="ukNumber"></p>
  <h3 id="eu"></h3>
  <p id="euNumber"></p>
  <h3 id="cm"></h3>
  <p id="cmNumber"></p>
</div>

Answer 2

Дайте всем кнопкам класс, чтобы вы могли зациклить их и назначить одну и ту же функцию слушателя. Функция может использовать e.target, чтобы получить нажатую кнопку.

Измените sizeAll на объект, ключи которого являются идентификаторами кнопок размера.

const comparison = (e) => {
  var size = sizeAll[e.target.id];
  us.textContent = 'US' + ' ' + e.target.value + ':';
  uk.textContent = 'UK';
  ukNumber.textContent = size.UK;
  eu.textContent = 'EU';
  euNumber.textContent = size.EU;
  cm.textContent = 'CM';
  cmNumber.textContent = size.CM;
};

document.querySelectorAll(".size").forEach(el => el.addEventListener('click', comparison));

let us = document.getElementById('current');
//uk
let uk = document.getElementById('uk');
let ukNumber = document.getElementById('ukNumber');
//eu
let eu = document.getElementById('eu');
let euNumber = document.getElementById('euNumber');
//cm
let cm = document.getElementById('cm');
let cmNumber = document.getElementById('cmNumber');

const sizeAll = {
  Four: {
    US: 4,
    UK: 3.5,
    EU: 36,
    CM: 22
  },
  FourPointFive: {
    US: 4.5,
    UK: 4,
    EU: 36.5,
    CM: 22.5
  },
  //other size objects removed from here
  Fourteen: {
    US: 14,
    UK: 13,
    EU: 48.5,
    CM: 32
  }
};

<div class="buttons">
  <button id='Four' class="size" value="4">4</button>
  <button id='FourPointFive' class="size" value="4.5">4.5</button>
  <button id='Fourteen' class="size" value="14">14</button>
</div>

<div>
  <h2 id="current"></h2>
  <h3 id="uk"></h3>
  <p id="ukNumber"></p>
  <h3 id="eu"></h3>
  <p id="euNumber"></p>
  <h3 id="cm"></h3>
  <p id="cmNumber"></p>
</div>