Javascript - Add event listener to multiple elements

Question

I have multiple elements using the same event listener. Instead of repeating the same function three times, wow do I combine them to call the same event to each of the three elements? cardNumber, cardExpiry, and cardCvc

cardNumber.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});
cardExpiry.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});
cardCvc.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

Don't use an Anonymous function.

StackSlave
– StackSlave

2020-06-12 01:00:18 +00:00
Commented Jun 12, 2020 at 1:00 — StackSlave
– StackSlave, Commented Jun 12, 2020 at 1:00

Isa · Accepted Answer · 2020-06-12 00:58:22Z

1

Check this

cardCvc.addEventListener('change', foo);

function foo(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
}

answered Jun 12, 2020 at 0:58

Isa

4281 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

I Putu Yoga Permana · Accepted Answer · 2020-06-12 01:00:21Z

0

Simply Separate the event handler function, and make an array of the element, then finally loop it to attach the event handler.

const eventHandler = function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
}

const items = [cardNumber, cardExpiry, cardCvc];
items.forEach((item) => {
    item.addEventListener('change, eventHandler);
});

answered Jun 12, 2020 at 1:00

I Putu Yoga Permana

4,2301 gold badge32 silver badges35 bronze badges

Comments

Mario · Accepted Answer · 2020-06-12 01:48:55Z

0

You could implement Event delegation pattern

Basically it consists of assigning the event to the container of the elements, then verifying the name or type of the element you discard those that are not relevant to you and in logical consequence only those that are of interest to you would be affected. To know more visit this publication please

Here an example

const container = document.querySelector("#container");
const displayError = document.getElementById("card-errors");

container.addEventListener("change", (event) => {
  const target = event.target;

  if (target.nodeName !== "INPUT") return;

  displayError.textContent = event.error ? event.error.message : "";
});

answered Jun 12, 2020 at 1:48

Mario

5,0044 gold badges42 silver badges65 bronze badges

Collectives™ on Stack Overflow

Javascript - Add event listener to multiple elements

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related