Trying to get the value of a node in JavaScript, but it keeps saying it's “null”

Question

I'm currently playing around with creating lists from HTML elements. My goal is to create a list of all values in a table when you click the "page next" buttons on the table. I then have an alert pop up to tell me the value of the first item in the list (which should be the value of the first row in the table). However, it always comes back "null".

Here is my JS

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = document.getElementsByClassName('box-electrode');
    alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers.item(0).nodeValue);
});

Here is an example of the HTML in the table's rows I'm targeting

<a href="#" class="box-electrode" value="56" title="Pack this electrode">
    <i class="fa fa-gift fa-fw text-warning"></i>
</a>

Currently the table has about 15 items (there is code elsewhere that creates the table from a DB), and the alert correctly says $allSerialNumbers.length is 15. However, it says the nodeValue of the first item is null , when it should actually say "56" in this example. (In the actual table, all the values are different).

Am I using JavaScript's nodes wrong?

Answer 1

First of all, as if youre using jQuery, you don't need to use document.getElementsByClassName (vanilla JS selector).

You can select your elements with $('.box-electrode') .

Another thing: an anchor ( <a> ) element doesn't have a value attribute. Either if you try to get it with jQuery's .val() , you won't get it, because it's not in the specification.

If you want to set custom attributes, you can use data- attributes. Like this:

<a href="#" class="box-electrode" data-value="56" title="Pack this electrode">
    <i class="fa fa-gift fa-fw text-warning"></i>
</a>

jQuery solution:

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = $('.box-electrode');
    alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers.first().attr('data-value'));
});

• .first() get the first element in a jQuery Object.
• .attr() get the value of a specified node attribute.

Vanilla JS:

document.getElementsByClassName("page-link")[0].addEventListener("click", function () {
    var $allSerialNumbers = document.getElementsByClassName('box-electrode');

    alert(
    'The first in the list of ' + $allSerialNumbers.length + ' items is' +
    ' data-value: ' + $allSerialNumbers[0].getAttribute('data-value') +
    ', title: ' + $allSerialNumbers[0].title
  );
});

Answer 2

First off, variables starting with $ are by convention used for jquery objects. $allSerialNumbers is a node element, not a jquery object.

$(document).on('click', ".page-link", function (e) {
     var $allSerialNumbers = $('.box-electrode');
     alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers[0].text());
});

Answer 3

If you're already using jquery, why not just do:

var $allSerialNumbers = $('.box-electrode');

alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers[0]);

Answer 4

This should work.

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = $('.box-electrode'),
          $targetVal =  $(e.target).attr('data-value');
    alert('The first in the list of ' + $allSerialNumbers + ' items is ' + $targetVal
});

Answer 5

You may also do just attributes to get the attribute "value" and then just access it's value with .value, like this:

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = $('.box-electrode');
    alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers[0].attributes["value"].value);
});

Since you are using jquery, no need to do .getElements..

Here you have a working fiddler in case you want to try other options with this same example: https://jsfiddle.net/spilafis/ufp4bz80/10