JavaScript получить элемент по имени


127

Рассмотрим эту функцию:

function validate()
{
  var acc = document.getElementsByName('acc').value;
  var pass = document.getElementsByName('pass').value;

  alert (acc);
}

И эта HTML-часть:

<table border="0" cellpadding="2" cellspacing="0" valign="top">
    <tr>
        <td class="td1">Account</td>
        <td class="td2"><input type="text" name="acc" /></td>
    </tr>
    <tr class="td1">
        <td>Password</td>
        <td class="td2"><input type="password" name="pass" /></td>
    </tr>
</table>
<div><button onClick="validate()" class="cupid-greenx">Login now</button></div>

Окно предупреждения отображается, но показывает "undefined".


Если вы можете изменить его полностью, я бы рекомендовал добавить поле «id» к вашим двум полям ввода и использовать его document.getElementById, которое возвращает ровно одно значение.
Odi

4
еще лучше:, var inputs = document.getElementsByTagName('input')возвращает список узлов, из которого вы можете извлечь оба элемента следующим образом: var pass = inputs.item ('pass'). Просто совет: это может ускорить работу, если вы имеете дело с большим DOM, так как getElementByIdбудет искать по всему дереву каждый раз, тогда как нодлист - нет, поэтому он быстрее ...
Элиас Ван Отегем

Маленький милый код действительно XD
Гильермо Гутьеррес

Ответы:


246

Причина, по которой вы видите эту ошибку, заключается в том, что document.getElementsByNameвозвращает a NodeListof elements. И a NodeListof elements не имеет .valueсвойства.

Используйте вместо этого:

document.getElementsByName("acc")[0].value

30

Обратите внимание на множественное число в этом методе:

document.getElementsByName()

Это возвращает массив элементов, поэтому используйте [0], чтобы получить первое вхождение, например

document.getElementsByName()[0]

8
Это не массив, это NodeList :-)
Флориан Маргейн,

1
@FlorianMargaine - На самом деле это HTMLCollection ;)
j08691

1
@ j08691 нет :) но это легко запутать: p
Florian Margaine

Что такое определение массива и чем оно отличается? NodeList - это просто объект, обернутый вокруг массива HTMLElements с помощью нескольких удобных методов. Во всяком случае, говоря языком непрофессионала для OP, я сказал массив.
Оззи

1
У массива намного больше методов, чем у NodeList. Нодлист принимает некоторые методы / свойства из массивов , таких как lengthсобственность, но это также не хватает много методов, таких как map, forEachи т.д. Это объясняет , почему мы должны использовать: Array.prototype.forEach.call( NodeList, fn ).
Florian Margaine

11

Вы хотите это:

function validate() {
    var acc = document.getElementsByName('acc')[0].value;
    var pass = document.getElementsByName('pass')[0].value;

    alert (acc);
}

Спасибо, что использовали пример OP в своем ответе.
Крис Бойд,

@KrisBoyd, разница в том, что я получаю первый элемент из массива, возвращаемого getElementsByName. Может, мне следовало прояснить это - не стесняйтесь редактировать, если хотите.
Эллиот Бонневиль,

Я дополнял вас :) Ни один из высших ответов не формирует его в том же формате на OP
Крис Бойд

6

Метод document.getElementsByName возвращает массив элементов. Например, вы должны сначала выбрать.

document.getElementsByName('acc')[0].value

4
Это не массив, это NodeList :-)
Флориан Маргейн,

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.