Why style rules don't apply when (target) is not used?

Question

I hope everyone is doing well.

When is used this code, style rules work:

document.getElementById("heading").addEventListener("click", function (e) {
    e.target.style.color = 'purple';
    e.target.style.textAlign = 'center';
    e.target.innerText = 'Code With Harry';
});

But when I remove .target from the code, the style rules don't work and it gives me error. I can't understand the reason behind it. I would really appreciate if anyone can help me out..

Answer 1

you can't remove the target because the e.target is the element that you need to style it. for better understanding console it.

target is the element that triggered the event (e.g., the user clicked on)

see more Event.target

document.getElementById("heading").addEventListener("click", function (e) {
  console.log(e.target);
  e.target.style.color = "purple";
  e.target.style.textAlign = "center";
  e.target.innerText = "Code With Harry";
});