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".

javascript html dom Юливер Галлето
источник

Если вы можете изменить его полностью, я бы рекомендовал добавить поле «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

Aidanc
источник

30

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

document.getElementsByName()

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

document.getElementsByName()[0]

Ozzy
источник

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

dalazx
источник

4

Это не массив, это NodeList :-)

Флориан Маргейн,

5

document.getElementsByName("myInput")[0].value;

Сэм Баттат
источник

1

Чтобы прояснить: это получение элемента из NodeList. :)

Кристиан Невердал

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

Ответы: