CODEWITHSUNDEEP
javascript
Scott O'Dea
Scott O'Dea

Reputation: 132

DOM Event target destructuring

I'm trying to destructure the innerHTML property off an event target, but the DOM doesn't seem to update when it's done this way. It works with styling, but not with innerHTML reassignment.

heading = document.querySelector('h1');

heading.addEventListener("click", function(e){
    let {innerHTML} = e.target;
    innerHTML = "Hi there";
})

Upvotes: 1

Views: 1478

Answers (1)

Dr_Derp
Dr_Derp

Reputation: 870

Using destructuring like that is the equvalent of this:

heading.addEventListener("click", function(e){
    let foo = e.target.innerHTML;
    foo = "Hi there";
})

In this case, because innerHTML is not an object, but is instead a scalar, JavaScript will do a copy by value, not by reference. Which means that changing foo does not change e.target.innerHTML because they are not pointing to the same location in memory.

Upvotes: 2

Related Questions