Question 50738 in Javascript Question posted in
A very good W3school tutorial can be found here.

I am unable to see addEventListener event in dev tools MicrosoftEdge Version 112.0.1722.34 (Official build) (64-bit) – Javascript

let x = document.createElement('p');
x.style.background = "aqua";
x.textContent = ' Click inside the box to Change background color ';
x.id = "para1";
console.log(x);
document.body.appendChild(x);

function changeBackgroundColor(e) {
  e.target.style.background = "yellow";
}
document.getElementById("para1").addEventListener("click", changeBackgroundColor);
p {
  border: solid green 2px;
  margin-right: 65em;
  margin-top: 24px;
}

Not able to see event listener in Microsoft edge tool (event listener has been added to code)

pic1

Tags:

2

Answers


  1. 0
    • Set your debugger before the lines you want to test, not as your last thing in your code.
    • Your code works if you remove the right margin
    let x = document.createElement('p');
x.style.background = "aqua";
x.textContent = ' Click inside the box to Change background color ';
x.id = "para1";
console.log(x);
document.body.appendChild(x);

function changeBackgroundColor(evt) {
  evt.currentTarget.style.background = "yellow";
}
debugger;
document.getElementById("para1").addEventListener("click", changeBackgroundColor);
    p {
  border: solid green 2px;
  /*margin-right: 65em;*/
  margin-top: 24px;
}
    Login or Signup to reply.
  2. 0

    The event is attached to an element. If you select this element then you can see its event handlers. You don’t have to pause the code for that.

    devtools element's event handlers

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search