Блог

Главная - Вопросы по программированию - Как я могу заставить одну функцию работать с несколькими кнопками HTML?

Как я могу заставить одну функцию работать с несколькими кнопками HTML?

#javascript #arrays #dom #button

#javascript #массивы #dom #кнопка

Вопрос:

Я создаю этот инструмент сравнения размеров просто для практики, так как я новичок в 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 раз (количество моих кнопок), все работает, но чтобы избежать повторения этого процесса, как я могу сделать этот код эффективным?

Комментарии:

1. Вот довольно эффективный способ, сокращающий ваш код до необходимого.

Ответ №1:

Дайте всем кнопкам класс, чтобы вы могли перебирать их и назначать одну и ту же функцию прослушивания. Функция может использоваться 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>

Ответ №2:

Самый простой способ сделать это 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>