Для того чтобы реализовать функциональность, при которой при нажатии на каждую кнопку они меняются по отдельности, вам потребуется использовать 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" и задаем красный цвет фона кнопки. Вы можете добавить любые другие изменения стилей или выполнять другие действия в этой функции в соответствии с вашими потребностями.
Теперь, при нажатии на каждую кнопку, она будет меняться по отдельности.