How do I manipulate inner html of element after clicking a button

Asked Feb 25 '21 at 17:58

Active Feb 25 '21 at 18:01

Viewed 15 times

Here I'm trying to select button whose class is add and then change its parent elements inner html to hello but this code dose not work for some reason can someone please guide me.

$(document).on('click','.add',()=>{ 
    $(this).parent().html('hello')
});

edited Feb 25 '21 at 18:01

freedomn-m

27,664
8
35
57

asked Feb 25 '21 at 17:58

Sanket

could you please provide your HTML code – Ruzaik Nazeer Feb 25 '21 at 18:01
@mohamedruzaik what for? – freedomn-m Feb 25 '21 at 18:01
1

The link above is quite long, but worth understanding. In summary, when you use `()=>` the `this` is isn't the `.add` that you clicked on, it's the same `this` as the outer scope (likely window/document). Change from `()=>{` to `function() {` and your code will work. – freedomn-m Feb 25 '21 at 18:03
@freedomn-m he is referring to a parent element which is unknown – Ruzaik Nazeer Feb 25 '21 at 18:03
@mohamedruzaik you mean `$(this).parent()`? The issue is with `()=>` so the `.add`'s parent is irrelevant as it's not `this` – freedomn-m Feb 25 '21 at 18:04
Hmm.. seems like the arrow function doesn't have this with it parent must be changed – Ruzaik Nazeer Feb 25 '21 at 18:14
1

Yes, the link I provided explains all that. Here's another one https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/es6%20&%20beyond/ch2.md#not-just-shorter-syntax-but-this In summary: don't use `()=>` for click event handlers – freedomn-m Feb 25 '21 at 18:15
Thanks brother it worked – Sanket Feb 25 '21 at 18:47

How do I manipulate inner html of element after clicking a button

0 Answers0