How do I get the value of an element inside a click() function?

Question

I am creating a list of all of my saved AI programs relevant to their name which is done like so and works fine:

@foreach ($ais as $ai)
    <a href='#' class='saved-ai'>{{ $ai }}</a> <br />
@endforeach

I then have a jQuery script which is designed to append the value of the name to an input box.

<script>
    jQuery(document).ready(function(){
        $('.saved-ai').click(function() {
            $('#ainame').val(this.html());
        });
    });
</script>

I tried to debug this to see what it held and why its behaviour was strange but I get this in my console:

<a href="#" class="saved-ai" name="Languages">Languages</a>

The error I receive is:

Uncaught TypeError: this.html is not a function
    at HTMLAnchorElement.<anonymous> (home:107)
    at HTMLAnchorElement.dispatch (app.js:1)
    at HTMLAnchorElement.g.handle (app.js:1)

After researching, app.js in laravel already includes jQuery. However, It seems that this.html() does not exist. How can I get the value of the clicked element?

The expected output here would be Language gets placed inside the input box as the value.

This SO answer seem to fit your situation too: https://stackoverflow.com/a/7838305/10864482 — , Jan 04 '19 at 17:45
`this` is an DOM Element. `html()` is jQuery method. Not an Element method — Taplar, Jan 04 '19 at 17:47
The dupe target is for `.attr()` but it's the same error/problem/solution — Andreas, Jan 04 '19 at 17:47
Or just use the innerHTML and save a jQuery object instantiation — Taplar, Jan 04 '19 at 17:48
@Andreas thanks so much! I wasn't encapsulating `$()` around `this` which jQuery expects since `this` is indeed a DOM node! Thanks a lot! — Jaquarh, Jan 04 '19 at 17:51

DIEGO CARRASCAL · Answer 1 · 2019-01-04T17:50:16.897

1

You could try changing html for text, like so:

<script>
 jQuery(document).ready(function(){
    $('.saved-ai').click(function() {
        $('#ainame').val($(this).text());
    });
 });
</script>

here you can find more about it: http://api.jquery.com/text/

edited Jan 04 '19 at 17:50

answered Jan 04 '19 at 17:48

DIEGO CARRASCAL

1,999
14
16

`text()` is probably a better method to use in my case, so thanks for advice. Thank you for pointing out that I was missing `$()` since `this` on its own is only the DOM node. Will mark when I can – Jaquarh Jan 04 '19 at 17:52
1

Please vote to close as duplicate if there's a perfect dupe target available (like in this case) instead of adding the same answer again. – Andreas Jan 04 '19 at 17:53
1

This is covered in the duplicate post. Not downvoting since it's accurate, but still I agree with Andreas – Taplar Jan 04 '19 at 17:53
Will do next time, I didn't read the comments before answering – DIEGO CARRASCAL Jan 04 '19 at 18:37

How do I get the value of an element inside a click() function?

1 Answers1