Привет, я пишу на кнопку рейтинга, и я хотел изменить цвет фона кнопки после того, как я нажал ее, но мой код ничего не делает.
<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';
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете попробовать следующее:
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';
})
})