Как сделать, чтобы при нажатии на объекты button они менялись по отдельности?

Для того чтобы реализовать функциональность, при которой при нажатии на каждую кнопку они меняются по отдельности, вам потребуется использовать JavaScript и назначить обработчики событий для каждой кнопки.

Вот пример, который позволяет реализовать такое поведение:

HTML:

<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>

JavaScript:

// Получаем все кнопки
const buttons = document.querySelectorAll('.button');

// Назначаем обработчик события для каждой кнопки
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // Меняем текст кнопки
    button.innerText = 'Clicked';
    // Меняем цвет фона кнопки
    button.style.backgroundColor = 'red';
  });
});

В данном примере мы сначала получаем все кнопки на странице с помощью метода querySelectorAll('.button') и сохраняем их в переменную buttons. Затем мы используем метод forEach для итерации по каждой кнопке и назначаем обработчик события addEventListener('click', ...) для каждой кнопки.

Функция-обработчик, переданная в addEventListener, будет вызываться при нажатии на каждую кнопку. Внутри этой функции мы меняем текст кнопки на "Clicked" и задаем красный цвет фона кнопки. Вы можете добавить любые другие изменения стилей или выполнять другие действия в этой функции в соответствии с вашими потребностями.

Теперь, при нажатии на каждую кнопку, она будет меняться по отдельности.