Изменить цвет фона на кнопке после нажатия

Привет, я пишу на кнопку рейтинга, и я хотел изменить цвет фона кнопки после того, как я нажал ее, но мой код ничего не делает.

    <ul>
         <li><button class = "btn"><p id = "num">1</p></button></li>
         <li><button class = "btn"><p id = "num">2</p></button></li>
         <li><button class = "btn"><p id = "num">3</p></button></li>
         <li><button class = "btn"><p id = "num">4</p></button></li>
         <li><button class = "btn"><p id = "num">5</p></button></li>

       </ul>
          
-----


const btn = document.querySelector('.btn'); 

 btn.addEventListener('click', function onClick(){
    btn.style.backgroundColor = 'orange'; 
 });



Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
50
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете попробовать следующее:

const btnList = document.querySelectorAll('.btn');

   btnList.forEach(btn => {
     btn.addEventListener('click', function onClick() {
     btn.style.backgroundColor = 'orange';
   });
})

Поскольку вы выбираете несколько кнопок из DOM, вам нужно querySelectorAll, а затем вам нужно перебрать их, чтобы получить желаемый результат.

    const btn = document.querySelectorAll('.btn'); 
    btn.forEach(b => {
      b.addEventListener('click', function onClick(){
        b.style.backgroundColor = 'orange'; 
     });  
    })
Ответ принят как подходящий

const btn = document.querySelector('.btn'); нацелен только на первую кнопку.

Вам нужно использовать querySelectorAll, чтобы выбрать все кнопки и добавить прослушиватели событий к каждой из них.

const allBtns = document.querySelectorAll('.btn'); 

allBtns.forEach(btn => {
   btn.addEventListener('click', function onClick(){
    btn.style.backgroundColor = 'orange'; 
 })
})

Другие вопросы по теме