I am a beginner and want to know how do I change the colour of the selected clicked button using the target method?
var buttons = document.querySelectorAll(".btn").length;
for (var i = 0; i < buttons; i++) {
document.querySelectorAll(".btn")[i].addEventListener("click", function () {
document.querySelectorAll(".btn").style.backgroundColor = "red";
});
}<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>var buttons = document.querySelectorAll(".btn");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", (e) =>{
e.target.style.backgroundColor = "red";
});
}<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>You need to use the event argument that you get from the click callback and the clicked element is the .target.
You can do:
document.querySelectorAll(".btn")[i].addEventListener("click", function (event) {
event.target.style.backgroundColor = "red";
});
But you can do instead:
const buttons = document.querySelectorAll(".btn");
buttons.forEach(btn => {
btn.addEventListener("click", function (event) {
event.target.style.backgroundColor = "red";
});
});<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>Your code is currently very inefficient.
Inside the for loop, you are reselecting every button. You should instead select them once outside the loop.
var buttons = document.querySelectorAll(".btn");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function (e) {
e.target.style.backgroundColor = "red";
});
}<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>