CODEWITHSUNDEEP
jqueryarrayspushundefined
Ferrax
Ferrax

Reputation: 35

jQuery.push into array returning undefined

I'm trying to push data from this h5 tag to my favorites array but it keeps returning undefined. It does return something, and it works on the click, but it just keeps returning undefined.

<h5 id="favoriteartist"> Armin van Buuren </h5>

And here's my script.

$('#favoriteadd').live('click',function() {
    var favorites = []
    favorites.push( $('h5 #favoriteartist').val() );
    console.log(favorites);
});

What am I doing wrong here?

Upvotes: 0

Views: 15025

Answers (2)

Andreas Louv
Andreas Louv

Reputation: 47099

Your selector is wrong. Simple use: 

$("#favoriteartist");

And also you should use .text not .val:

favorites.push( $("#favoriteartist").text() );

And if you are using jQuery 1.7+ you should use .on not .live:

$(document).on('click', '#favoriteadd', function() {
    var favorites = []
    favorites.push( $('#favoriteartist').text() );
    console.log(favorites);
});

Now you can change document with a static selector. If #favoriteadd is in the docuement when the event is bound you can simple bind it as a normal event:

$('#favoriteadd').on('click', function() {
    var favorites = []
    favorites.push( $('#favoriteartist').text() );
    console.log(favorites);
});

h5 #favoriteartist is like saying:

  1. Give me all h5 elements on the whole page.
  2. Now give me all elements with the id favoriteartist witch is a (grand-)child of these h5.

We know that an id in html is always unique, so we simple say:

  1. Give me the element with the id favoriteartist.

Upvotes: 7

Rune FS
Rune FS

Reputation: 21742

Your code does not return undefined. It returns an array with one element. The element is undefined meaning your selector is selecting an h5 element that does not have a value and val() of that selection therefor returns undefined. .val() can be used on eg. an text input field to get the value the user have typed in

<input type="text" id="t" value="..." />
...
$("#t").val(); //will return the value of the input element

in the case of a h5 element if you wish to get the textual content of that element use .text() instead.

$("#favoriteartist").text(); //will return " Armin van Buuren "

Upvotes: 0

Related Questions