combine two events into one addEventListener() method with javascript

Question

How to create the same eventListener code block for "click" and "focus" event within the same eventListener block of code? I am trying to refactor my code. In the example below I run the same exact block of code just to have click and focus function to comply with accessibility,
Example:
h.addEventListener('click', () => {
    infoArea.style.border = 'solid 2px #ffe06a';
    infoAreaH2.textContent = '1 Hydrogen';
    infoAreaH2.style.backgroundColor = '#ffe06a';
    infoAreaP.innerHTML = 'Details about Hydrogen will appear here. See Sulfur element for formatting of all elements. Text for all to come.';
            });
h.addEventListener('focus', () => {
    infoArea.style.border = 'solid 2px #ffe06a';
    infoAreaH2.textContent = '1 Hydrogen';
    infoAreaH2.style.backgroundColor = '#ffe06a';
    infoAreaP.innerHTML = 'Details about Hydrogen will appear here. See Sulfur element for formatting of all elements. Text for all to come.';
   });

Steven Parker · Answer

Just define the handler as a separate function and then use it for both listeners:
```js
const handler = () => {
  infoArea.style.border = "solid 2px #ffe06a";
  infoAreaH2.textContent = "1 Hydrogen";
  infoAreaH2.style.backgroundColor = "#ffe06a";
  infoAreaP.innerHTML = "Details about Hydrogen will appear here. See Sulfur element for formatting of all elements. Text for all to come.";
};
h.addEventListener('click', handler);
h.addEventListener('focus', handler);
```

Welcome to the Treehouse Community

Looking to learn something new?

Magdalena Misiuna

Magdalena Misiuna

combine two events into one addEventListener() method with javascript

1 Answer

Steven Parker

Steven Parker