Jquery click multiple IDs and get value

Question

I'm trying to get the value of an element when a user click on it. This is my code:

<div id="heroes-selection" class="row dflex justify-content-left">
    <figure id="luna" class="heroes-pic border text-danger m-3" value="heroes.luna">
      <img class="animated-gif">
   </figure>

   <figure id="qop" class="heroes-pic border text-danger m-3" value="heroes.qop">
      <img class="animated-gif">
   </figure>
</div>

I've tried to use Jquery $(this) and the result came out as undefined.

$(".heroes-pic").on("click", () => {
  player = $(this).attr("value");
  console.log(player);
});

My goal is to get the value heroes.luna when the user click on the figure with id="luna". The same for id="qop", I need to get the value heroes.qop. Thank you!

Just change arrow function ()=> to normal function().

wasimv09
– wasimv09

2018-05-13 08:44:52 +00:00
Commented May 13, 2018 at 8:44 — wasimv09
– wasimv09, Commented May 13, 2018 at 8:44

Eddie · Accepted Answer · 2018-05-13 08:22:48Z

You have to use the classic function instead of arrow function. this on arrow function refers to the HTMLDocument and on the object clicked. And that is the reason why you are not getting the correct result. You are getting attr value from HTMLDocument.

$(".heroes-pic").on("click", function() {
  player = $(this).attr("value");
  console.log(player);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heroes-selection" class="row dflex justify-content-left">
  <figure id="luna" class="heroes-pic border text-danger m-3" value="heroes.luna"> heroes.luna
    <img class="animated-gif">
  </figure>

  <figure id="qop" class="heroes-pic border text-danger m-3" value="heroes.qop"> heroes.qop
    <img class="animated-gif">
  </figure>

</div>

Other option: you can use event.currentTarget instead of this on arrow function

Like:

$(".heroes-pic").on("click", (event) => {
  player = $(event.currentTarget).attr("value");
  console.log(player);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heroes-selection" class="row dflex justify-content-left">
  <figure id="luna" class="heroes-pic border text-danger m-3" value="heroes.luna">
    <img class="animated-gif">heroes.luna
  </figure>

  <figure id="qop" class="heroes-pic border text-danger m-3" value="heroes.qop">
    <img class="animated-gif">heroes.qop
  </figure>

</div>

Naoric · Accepted Answer · 2018-05-13 08:15:58Z

1

This is because you are using an arrow function that binds the this parameter to the enclosing scope's this.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

replace it with a function:

$(".heroes-pic").on("click", function () {
  player = $(this).attr("value");
  console.log(player);
}

answered May 13, 2018 at 8:15

Naoric

3552 silver badges11 bronze badges

Collectives™ on Stack Overflow

Jquery click multiple IDs and get value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related