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>

Вікно попередження відображається, але воно відображається "невизначено".


Якщо ви можете це повністю змінити, я рекомендую додати поле "id" до двох ваших полів введення та використовувати document.getElementById, яке повертає рівно одне значення.
Оді

4
ще краще:, var inputs = document.getElementsByTagName('input')повертає ноделіст, з якого ви можете витягти обидва елементи, як-от: var pass = inputs.item ('pass'). Лише порада, це може пришвидшити справи, якщо ви маєте справу з великим DOM, оскільки getElementByIdкожен раз буде шукати все дерево, тоді як ноделіст не стане, тож швидше ...
Elias Van Ootegem

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

Відповіді:


246

Причина, по якій ви бачите цю помилку, полягає в тому, що document.getElementsByNameповертає a NodeListелементи. А NodeListелементів не має .valueвластивості.

Використовуйте це замість:

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

30

Зверніть увагу на множину в цьому способі:

document.getElementsByName()

Це повертає масив елементів, тому використовуйте [0] для отримання першого появи, наприклад

document.getElementsByName()[0]

8
Це не масив, це NodeList :-)
Флоріан Маргайн

1
@FlorianMargaine - Насправді це HTMLCollection ;)
j08691

1
@ j08691 nope :), але можна легко сплутати: p
Флоріан Маргайн

Що таке визначення масиву і чим це відрізняється? NodeList - це лише об'єкт, обгорнутий навколо масиву HTMLElements за допомогою декількох зручних методів. У всякому разі, щоб висловити це у простих умовах для ОП, я сказав масив.
Озі

1
Масив має набагато більше методів, ніж NodeList. NodeList бере деякі методи / властивості з масивів, таких як lengthвластивість, але також йому не вистачає безліч методів, таких як map,forEach і т.д. Це пояснює , чому ми повинні використовувати: Array.prototype.forEach.call( NodeList, fn ).
Флоріан Маргаїн

11

Ти хочеш це:

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

    alert (acc);
}

Дякуємо, що використовували приклад ОП у своїй відповіді.
Кріс Бойд

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

Я давав вам доповнення :) жодна з вищих відповідей не формує його в тому ж форматі на ОП
Кріс Бойд,

6

Метод document.getElementsByName повертає масив елементів. Спершу слід вибрати, наприклад.

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

4
Це не масив, це NodeList :-)
Флоріан Маргайн

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.