How can I write this JS code more simple, smarter?

Question

I need shorter, smarter code becuase there is a lot of these shapes with different IDs.

const shape1 = document.getElementById('shape1');
const shape2 = document.getElementById('shape2');
const shape3 = document.getElementById('shape3');
const shape4 = document.getElementById('shape4');
const shape5 = document.getElementById('shape5');

shape1.addEventListener('click', function handleClick() {
    shape1.style.color = color
});
shape2.addEventListener('click', function handleClick() {
    shape2.style.color = color
});
shape3.addEventListener('click', function handleClick() {
    shape3.style.color = color
});
shape4.addEventListener('click', function handleClick() {
    shape4.style.color = color
});
shape5.addEventListener('click', function handleClick() {
    shape5.style.color = color
});

Answer 1

You can use one function with data-attribute like:

 const shapes = document.querySelectorAll('[data-shape]'); shapes.forEach(el => { el.addEventListener('click', (e) => { e.target.style.color = e.target.dataset.shape; }); });

 <div data-shape='red'>click me</div> <div data-shape='blue'>click me</div> <div data-shape='green'>click me</div>

Reference:

• Using data attributes

Answer 2

You can get all elements and then loop for them

like this:

// get elements by ID that STARTS WITH shape
const shapes  = document.querySelectorAll(`[id^="shape"]`);

shapes.forEach(shape=> {
  shape.addEventListener('click', () => {
    shape.style.color = color;
  });
});