[英]Trying to get the value of a node in JavaScript, but it keeps saying it's “null”
I'm currently playing around with creating lists from HTML elements. 我目前正在从HTML元素创建列表。 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".
但是,它总是返回“ null”。
Here is my JS 这是我的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 这是我定位的表格行中HTML的示例
<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. 当前,该表大约有15个项目(在其他地方有代码从数据库创建该表),并且警报正确显示
$allSerialNumbers.length
为15。但是,它说第一个项目的nodeValue
为null ,而实际上它应该在此示例中说“ 56”。 (In the actual table, all the values are different). (在实际表中,所有值都不同)。
Am I using JavaScript's nodes wrong? 我使用JavaScript的节点是否错误?
First of all, as if youre using jQuery, you don't need to use document.getElementsByClassName
(vanilla JS selector). 首先,就像您使用jQuery一样,您不需要使用
document.getElementsByClassName
(香草JS选择器)。
You can select your elements with $('.box-electrode')
. 您可以使用
$('.box-electrode')
选择元素。
Another thing: an anchor ( <a>
) element doesn't have a value
attribute. 另一件事:锚(
<a>
)元素没有value
属性。 Either if you try to get it with jQuery's .val()
, you won't get it, because it's not in the specification. 如果您尝试使用jQuery的
.val()
来获取它,则不会得到它,因为它不在规范中。
If you want to set custom attributes, you can use data-
attributes. 如果要设置自定义属性,则可以使用
data-
属性。 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: jQuery解决方案:
$(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'));
});
Vanilla JS: 香草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
);
});
First off, variables starting with $ are by convention used for jquery objects. 首先,按照惯例,以$开头的变量用于jquery对象。 $allSerialNumbers is a node element, not a jquery object.
$ allSerialNumbers是节点元素,而不是jquery对象。
$(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());
});
If you're already using jquery, why not just do: 如果您已经在使用jquery,为什么不这样做:
var $allSerialNumbers = $('.box-electrode');
alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers[0]);
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
});
You may also do just attributes to get the attribute "value" and then just access it's value with .value, like this: 您也可以只执行属性以获取属性“值”,然后仅使用.value来访问其值,如下所示:
$(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.. 由于您正在使用jquery,因此无需执行.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 在这里,您有一个工作中的提琴手,以防您想使用同一示例尝试其他选项: https : //jsfiddle.net/spilafis/ufp4bz80/10
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.