0

Here I have a simple button with class .change in my HTML.

Now when I click on the button and then observe the Chrome console I get the output as mouse event and the text written on button ("Click Me!"), which is excepted.

To my surprise when I navigate the mouse event in the google console then I see e.target.innerText was set to "HELLO". How is it possible I have first console log the event then changed the innerText to "HELLO" in last line.

Also when I use debugger breakpoint the output was expected. Without using debugger the innerText attribute in the mouseevent (console log in 1st line of eventhandler) is showing "HELLO".

let btn = document.querySelector('.change');
btn.addEventListener ("click", (e) => {
   console.log(e);
   const text = e.target.innerText;
   console.log(text);
   e.target.innerText = "HELLO";
});

HTML :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A button</title>
</head>
<body>
    <button type="button" class="change">Click me!</button>
    <script src="/practice/prac.js"></script>
</body>
</html>
CodeIsLife
  • 1
  • 2
  • Show us the html to. – Grumpy Mar 07 '21 at 10:14
  • Chrome debugger will show you a live result of the object. It's not a snapshot.. So when you expand your expanding the current state of the object. – Keith Mar 07 '21 at 10:16
  • Thanks, @Keith for your help . But why does the following code doesn't print "Hi" then. ` a=[1,2,3]; console.log (a); a="Hi";` – CodeIsLife Mar 07 '21 at 10:28
  • Because you created a new `a`,.. But if you did -> `var a = [1,2,3]; console.log(a); a[0] = 4;` you will notice the console will say `(3) [1,2,3]`, but if you now click the down arrow you will see `0:4, 1:2, 2: 3`.. IOW: The result you get in Chrome debugger before you click the down arrow is fine, but if you expand it will evaluate late, this is of course more obvious with deeply nested object, or larger arrays where the summary would get cut of.. – Keith Mar 08 '21 at 16:58

0 Answers0