javascript - How to change the color of multiple objects with one button?

Question

I want to change the color of multiple objects (footer, divs, text) background and text color, with one button. I tried using button javascript, but I don't want name multiple objects button in order to change their color. Thanks

Answer 1

Try this First create a button HTML whit the id "btnChangeColor"

<button id="btnChangeColor" class="btn btn-primary">Change Color</button>

With JavaScript add the listener and with the DOM get all elements to change.

const btnChangeColor =    document.querySelector('#btnChangeColor');
const footer =            document.querySelector('footer');
const divs =              document.querySelectorAll('div');

btnChangeColor.addEventListener('click', () => {
    footer.classList.add('custom-theme');
    divs.forEach(item => {
        item.classList.add('custom-theme');
    });
});

You can custom the class CSS (custom-theme) with the values with you prefer

.custom-theme {
    background-color: green;
    color: white;
}