在 JavaScript 按钮事件中，如何避免代码重复（当每个按钮功能相似时）

Question

I'm new to JavaScript and am trying to find out how to avoid using duplicate code for event listeners.

I have a html page with a few buttons.

In this example with 2 buttons, (id'd trip_1 and trip_2 ) I want to have the button flash blue when clicked and then move on to the next step of the code after a few milliseconds

The code works, but has too much repitition.

Here I get a const for every button and then add an event listener to it. The listener does almost the same.

Is there a recommended way to avoid writing repeated listeners for every button?

I'd prefer having a single event listener listen to all buttons and then react to the one pressed.

let step_change_ms = 250

function setCurrentStep(step) {
  // removed, this function hides the elements not in use and
  // shows the currently needed ones
}

const tripButton1 = document.getElementById('trip_1');
tripButton1.addEventListener('click', event => {
    event.preventDefault();
    tripButton1.style.backgroundColor = "blue";

    buttons_active = false;
    myBooking.trips = 1;
    setTimeout(function () {
        setCurrentStep('step4')
    }, step_change_ms);
    setTimeout(function () {
        tripButton1.style.backgroundColor = "white";
    }, step_change_ms);
});

const tripButton2 = document.getElementById('trip_2');
tripButton2.addEventListener('click', event => {
    event.preventDefault();
    tripButton2.style.backgroundColor = "blue";
    buttons_active = false;
    myBooking.trips = 2;
    setTimeout(function () {
        setCurrentStep('step4')
    }, step_change_ms);
    setTimeout(function () {
        tripButton2.style.backgroundColor = "white";
    }, step_change_ms);
});

Answer 1

You could do something like this (although I don't love splitting the id to get the number, but this is the general idea):

 let step_change_ms = 250 function setCurrentStep(step) { // removed, this function hides the elements not in use and // shows the currently needed ones } const myBooking = { trips: 0 }; document.querySelectorAll('[id^=trip_]').forEach((el) => { const [, num ] = el.id.split('_'); el.addEventListener('click', event => { event.preventDefault(); el.style.backgroundColor = "blue"; buttons_active = false; myBooking.trips = parseInt(num); console.log(myBooking); setTimeout(function () { setCurrentStep('step4') }, step_change_ms); setTimeout(function () { el.style.backgroundColor = "white"; }, step_change_ms); }); });

 <button id="trip_1">1</button> <button id="trip_2">2</button>

Or, maybe better:

 let step_change_ms = 250 function setCurrentStep(step) { // removed, this function hides the elements not in use and // shows the currently needed ones } const myBooking = { trips: 0 }; const addListener = (el, num) => { el.addEventListener('click', event => { event.preventDefault(); el.style.backgroundColor = "blue"; buttons_active = false; myBooking.trips = num; console.log(myBooking); setTimeout(function () { setCurrentStep('step4') }, step_change_ms); setTimeout(function () { el.style.backgroundColor = "white"; }, step_change_ms); }); } addListener(document.getElementById('trip_1'), 1); addListener(document.getElementById('trip_2'), 2);

 <button id="trip_1">1</button> <button id="trip_2">2</button>

Answer 2

I think the solution is pretty much easy. You need to create a separate parametrized function that changes behavior based on passed parameters. As an example, you may create a factory function that takes some parameters and returns a new function (event handler). The code will look like that:

function createEventListener(btn, trips) {
    return function(event) {
       event.preventDefault();
       btn.style.backgroundColor = "blue";
       buttons_active = false;
       myBooking.trips = trips;
       setTimeout(function () {
           setCurrentStep('step4')
       }, step_change_ms);
       setTimeout(function () {
          btn.style.backgroundColor = "white";
       }, step_change_ms);
    }
}
const tripButton1 = document.getElementById('trip_1');
tripButton1.addEventListener('click', createEventListener(tripButton1, 1));
const tripButton2 = document.getElementById('trip_2');
tripButton2.addEventListener('click', createEventListener(tripButton2, 2));

PS Please note, the example may have some typos as I did not verify it, but I hope that the idea is clear.

PPS it is not always good to try to write DRY ( https://uk.wikipedia.org/wiki/Don%27t_repeat_yourself ) code, but better focus on SOLID ( https://en.wikipedia.org/wiki/SOLID ) principles