0
<div class="subjects">
  <div class="bg-red">
    <i class="lni lni-rocket"></i>
    <h6 class="font-weight-bold">Physics</h6>
  </div>
</div>

Say I have the above html, and I would like to get the text content of h6 every time I click the outermost div. Here's what I did:

$('.subjects').on('click', (e) => {
    const h6 = $(this).find('h6');
    console.log(h6.text());
});

But this does not print Physics, which was inside h6. It print's an empty string. How do I access the text of h6 when I click the outermost div?

stackneverflow
  • 123
  • 8
  • In short: `$('.subjects').on('click', function() {...`. – Andy Feb 06 '22 at 05:55
  • 1
    @Andy Thanks! So just to be clear for anyone who stumbles on this, arrow functions does not have its own `this`. Arrow functions establish `this` based on the scope the Arrow function is defined within. [Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#:~:text=have%C2%A0their%20own-,this,-.%20Another%20example%20involving) – stackneverflow Feb 06 '22 at 06:02

0 Answers0