$( this ).attr('value') returns undefined

Question

I'm trying to use jQuery to get the value or id of a li element on clicking. Everything I've tried returns undefined

HTML

<ul id="list" class="content-ul">
    <li value="0"><img src="/image0.png" /></li>
    <li value="1"><img src="/image1.png" /></li>
    <li value="2"><img src="/image2.png" /></li>
    <li value="3"><img src="/image3.png" /></li>
</ul>

JavaScript

$( '#list li' ).click( ( event ) => {
    var value = $(this).attr('value');
    alert(value); // returns undefined
} );

I've tried using this.id as well as $( this ).id - undefined

I've tried giving the img tag an id and a value - still undefined

I've tried giving the li tag an id - still again, undefined

don't use an arrow function if you want `this` to be the target element - i.e. use `function ( event ) {` — Jaromanda X, Mar 15 '23 at 05:19
@VardanBetikyan read here why: https://www.javascripttutorial.net/es6/when-you-should-not-use-arrow-functions/. And kindly close the question — Alive to die - Anant, Mar 15 '23 at 05:21
The reason why the code returns undefined is because `this` inside the arrow function does not refer to the DOM element that was clicked. — Salah a, Mar 15 '23 at 05:22
I always assumed an arrow function is just a shorthand method. Guess not, thanks guys! — Vardan Betikyan, Mar 15 '23 at 05:24

score 3 · Answer 1 · answered Mar 15 '23 at 05:24

3

The this context cannot be bound manually by jQuery with an arrow function. Use a regular function or use event.currentTarget to access the element the event listener is attached to.

$('#list li').click( ( event ) => {
    var value = $(event.currentTarget).attr('value');
    console.log(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list" class="content-ul">
    <li value="0"><img src="/image0.png" /></li>
    <li value="1"><img src="/image1.png" /></li>
    <li value="2"><img src="/image2.png" /></li>
    <li value="3"><img src="/image3.png" /></li>
</ul>

answered Mar 15 '23 at 05:24

Unmitigated

76,500
11
62
80

please add the other solution as suggested in the comments as well so that OP can get both ideas. though a good answer +1 – Alive to die - Anant Mar 15 '23 at 05:40
@Anant-Alivetodie I did mention using a regular function and the code for that has already been covered by other answers, so I don't feel it's necessary to repeat it. – Unmitigated Mar 15 '23 at 05:41
Unmitigated yes, totally fine. – Alive to die - Anant Mar 15 '23 at 06:00

score 1 · Accepted Answer · answered Mar 15 '23 at 05:25

this inside the arrow function does not refer to the DOM element that was clicked.

$( '#list li' ).click(function() {
    var value = $(this).attr('value');
    alert(value); // returns undefined
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list" class="content-ul">
    <li value="0"><img src="/image0.png" /></li>
    <li value="1"><img src="/image1.png" /></li>
    <li value="2"><img src="/image2.png" /></li>
    <li value="3"><img src="/image3.png" /></li>
</ul>

score 0 · Answer 3 · edited Mar 17 '23 at 20:32

Why not put an "a" tag with a class and put an image inside?

Put the atrribut on the "a" tag like below:

HTML

<a href="#" class="something" data-id="01"><img src="">
<a href="#" class="something" data-id="12"><img src="">

jQuery

$('.something').on('click', function () {
    id = $(this).data('id');
    console.log(id);
    alert("the Id is : " + id);
});

You can make your own data atribute, like data-id, data-name, etc.

vikram kuldeep · Answer 4 · 2023-03-15T06:18:41.293

This context cannot be bound manually by jQuery with the arrow function. Use a regular function or use event.currentTarget to access the element attached to the event listener.

    $('#list li').click( ( event ) => {
        var value = $(event.currentTarget).attr('value');
        // console.log(value);
        alert(value);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul id="list" class="content-ul">
        <li value="0">image code0</li>
        <li value="1">image code1</li>
        <li value="3">image code3</li>
    </ul>

$( this ).attr('value') returns undefined

4 Answers4