Hello i write on a rating button and i wanted to change the background color from the button after i clicked it but my code does nothing.
JavaScript
x
21
21
1
<ul>
2
<li><button class="btn"><p id="num">1</p></button></li>
3
<li><button class="btn"><p id="num">2</p></button></li>
4
<li><button class="btn"><p id="num">3</p></button></li>
5
<li><button class="btn"><p id="num">4</p></button></li>
6
<li><button class="btn"><p id="num">5</p></button></li>
7
8
</ul>
9
10
-----
11
12
13
const btn = document.querySelector('.btn');
14
15
btn.addEventListener('click', function onClick(){
16
btn.style.backgroundColor = 'orange';
17
});
18
19
20
21
Advertisement
Answer
const btn = document.querySelector('.btn');
is only targeting the first button.
You need to use querySelectorAll to select all buttons and add event listeners to each of them.
JavaScript
1
7
1
const allBtns = document.querySelectorAll('.btn');
2
3
allBtns.forEach(btn => {
4
btn.addEventListener('click', function onClick(){
5
btn.style.backgroundColor = 'orange';
6
})
7
})