JQuery Onclick event.target Returning Wrong Element

Question

I'm trying to print the id of the target that I click on with the class piece . Here's the JavaScript.

function attachClickHandlers() {
  $('.piece').click(function(event) {
    console.log(event.target.id)
  })
}

attachClickHandlers();

HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="full-board">
      <div id="pieces">
        <img src="assets/w_r.svg" id="w_r1" class="piece">
        <img src="assets/w_n.svg" id="w_n1" class="piece">
        <img src="assets/w_b.svg" id="w_b1" class="piece">
        <img src="assets/w_q.svg" id="w_q" class="piece">
        <img src="assets/w_k.svg" id="w_k" class="piece">
        <img src="assets/w_b.svg" id="w_b2" class="piece">
        <img src="assets/w_n.svg" id="w_n2" class="piece">
        <img src="assets/w_r.svg" id="w_r2" class="piece">

        <img src="assets/w_p.svg" id="w_p1" class="piece">
        <img src="assets/w_p.svg" id="w_p2" class="piece">
        <img src="assets/w_p.svg" id="w_p3" class="piece">
        <img src="assets/w_p.svg" id="w_p4" class="piece">
        <img src="assets/w_p.svg" id="w_p5" class="piece">
        <img src="assets/w_p.svg" id="w_p6" class="piece">
        <img src="assets/w_p.svg" id="w_p7" class="piece">
        <img src="assets/w_p.svg" id="w_p8" class="piece">

        <img src="assets/b_r.svg" id="b_r1" class="piece">
        <img src="assets/b_n.svg" id="b_n1" class="piece">
        <img src="assets/b_b.svg" id="b_b1" class="piece">
        <img src="assets/b_q.svg" id="b_q" class="piece">
        <img src="assets/b_k.svg" id="b_k" class="piece">
        <img src="assets/b_b.svg" id="b_b2" class="piece">
        <img src="assets/b_n.svg" id="b_n2" class="piece">
        <img src="assets/b_r.svg" id="b_r2" class="piece">

        <img src="assets/b_p.svg" id="b_p1" class="piece">
        <img src="assets/b_p.svg" id="b_p2" class="piece">
        <img src="assets/b_p.svg" id="b_p3" class="piece">
        <img src="assets/b_p.svg" id="b_p4" class="piece">
        <img src="assets/b_p.svg" id="b_p5" class="piece">
        <img src="assets/b_p.svg" id="b_p6" class="piece">
        <img src="assets/b_p.svg" id="b_p7" class="piece">
        <img src="assets/b_p.svg" id="b_p8" class="piece">
      </div>

However, if I click on any of the white pieces on the first row (pawns), it prints w_p8 and if I click on any of the white pieces on the second row, it prints w_r2 .

What am I doing wrong?

Edit: It worked for most of you that tried it so it's probably something else in my code. Sorry I didn't include it at the beginning, I didn't think anything else would have much of an effect I managed to reproduce the problem here on JSFiddle: https://jsfiddle.net/chy86fbq/

Answer 1

You said:

I'm trying to print the id of the target that I click on with the class "piece" whose name also includes "w".

Probably instead of name you mean id . so you need to check if the id includes w or not then log it. Also note that you've missed a closing div tag.

Update

Based on your comment related to share your whole code ( https://jsfiddle.net/chy86fbq/ ), you are using position = 'absolute' and don't set left and top . Instead of setting paddingLeft and paddingTop you need to set left and top for piece class.

 console.clear(); attachClickHandlers(); function attachClickHandlers() { $('.piece').click(function (event) { if (event.target.id.includes("w")) console.log(event.target.id) }) }

 img { display: inline-block; width: 50px; height: 50px; outline: 1px solid black; }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div id="full-board"> <div id="pieces"> <img src="assets/w_r.svg" alt="w_r1" id="w_r1" class="piece"> <img src="assets/w_n.svg" alt="w_n1" id="w_n1" class="piece"> <img src="assets/w_b.svg" alt="w_b1" id="w_b1" class="piece"> <img src="assets/w_q.svg" alt="w_q" id="w_q" class="piece"> <img src="assets/w_k.svg" alt="w_k" id="w_k" class="piece"> <img src="assets/w_b.svg" alt="w_b2" id="w_b2" class="piece"> <img src="assets/w_n.svg" alt="w_n2" id="w_n2" class="piece"> <img src="assets/w_r.svg" alt="w_r2" id="w_r2" class="piece"> <img src="assets/w_p.svg" alt="w_p1" id="w_p1" class="piece"> <img src="assets/w_p.svg" alt="w_p2" id="w_p2" class="piece"> <img src="assets/w_p.svg" alt="w_p3" id="w_p3" class="piece"> <img src="assets/w_p.svg" alt="w_p4" id="w_p4" class="piece"> <img src="assets/w_p.svg" alt="w_p5" id="w_p5" class="piece"> <img src="assets/w_p.svg" alt="w_p6" id="w_p6" class="piece"> <img src="assets/w_p.svg" alt="w_p7" id="w_p7" class="piece"> <img src="assets/w_p.svg" alt="w_p8" id="w_p8" class="piece"> <img src="assets/b_r.svg" alt="b_r1" id="b_r1" class="piece"> <img src="assets/b_n.svg" alt="b_n1" id="b_n1" class="piece"> <img src="assets/b_b.svg" alt="b_b1" id="b_b1" class="piece"> <img src="assets/b_q.svg" alt="b_q" id="b_q" class="piece"> <img src="assets/b_k.svg" alt="b_k" id="b_k" class="piece"> <img src="assets/b_b.svg" alt="b_b2" id="b_b2" class="piece"> <img src="assets/b_n.svg" alt="b_n2" id="b_n2" class="piece"> <img src="assets/b_r.svg" alt="b_r2" id="b_r2" class="piece"> <img src="assets/b_p.svg" alt="b_p1" id="b_p1" class="piece"> <img src="assets/b_p.svg" alt="b_p2" id="b_p2" class="piece"> <img src="assets/b_p.svg" alt="b_p3" id="b_p3" class="piece"> <img src="assets/b_p.svg" alt="b_p4" id="b_p4" class="piece"> <img src="assets/b_p.svg" alt="b_p5" id="b_p5" class="piece"> <img src="assets/b_p.svg" alt="b_p6" id="b_p6" class="piece"> <img src="assets/b_p.svg" alt="b_p7" id="b_p7" class="piece"> <img src="assets/b_p.svg" alt="b_p8" id="b_p8" class="piece"> </div> </div>

Answer 2

function attachClickHandlers need to initialize in document.ready , and check for w ,please follow the below code

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div id="full-board"> <div id="pieces"> <img src="assets/w_r.svg" id="w_r1" class="piece"> <img src="assets/w_n.svg" id="w_n1" class="piece"> <img src="assets/w_b.svg" id="w_b1" class="piece"> <img src="assets/w_q.svg" id="w_q" class="piece"> <img src="assets/w_k.svg" id="w_k" class="piece"> <img src="assets/w_b.svg" id="w_b2" class="piece"> <img src="assets/w_n.svg" id="w_n2" class="piece"> <img src="assets/w_r.svg" id="w_r2" class="piece"> <img src="assets/w_p.svg" id="w_p1" class="piece"> <img src="assets/w_p.svg" id="w_p2" class="piece"> <img src="assets/w_p.svg" id="w_p3" class="piece"> <img src="assets/w_p.svg" id="w_p4" class="piece"> <img src="assets/w_p.svg" id="w_p5" class="piece"> <img src="assets/w_p.svg" id="w_p6" class="piece"> <img src="assets/w_p.svg" id="w_p7" class="piece"> <img src="assets/w_p.svg" id="w_p8" class="piece"> <img src="assets/b_r.svg" id="b_r1" class="piece"> <img src="assets/b_n.svg" id="b_n1" class="piece"> <img src="assets/b_b.svg" id="b_b1" class="piece"> <img src="assets/b_q.svg" id="b_q" class="piece"> <img src="assets/b_k.svg" id="b_k" class="piece"> <img src="assets/b_b.svg" id="b_b2" class="piece"> <img src="assets/b_n.svg" id="b_n2" class="piece"> <img src="assets/b_r.svg" id="b_r2" class="piece"> <img src="assets/b_p.svg" id="b_p1" class="piece"> <img src="assets/b_p.svg" id="b_p2" class="piece"> <img src="assets/b_p.svg" id="b_p3" class="piece"> <img src="assets/b_p.svg" id="b_p4" class="piece"> <img src="assets/b_p.svg" id="b_p5" class="piece"> <img src="assets/b_p.svg" id="b_p6" class="piece"> <img src="assets/b_p.svg" id="b_p7" class="piece"> <img src="assets/b_p.svg" id="b_p8" class="piece"> </div> </div> </body> <script> function attachClickHandlers() { $('.piece').click(function(event) { console.log("event.target.id.includes('w')" +event.target.id.includes("w")); console.log("event.target.id" +event.target.id); }); } $( document ).ready(function() { attachClickHandlers(); }); </script>

Refer - https://api.jquery.com/ready/ , https://api.jquery.com/contains-selector/ , https://www.w3schools.com/jsref/jsref_includes.asp

Regards DK

Answer 3

I struggled for three hours to find a solution, I was using the class name to catch the event, but once I give every element diffrent id now the event $(this) pointed to the correct element clicked.