JavaScript erhält Element nach Namen


127

Betrachten Sie diese Funktion:

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

  alert (acc);
}

Und dieser HTML-Teil:

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

Das Warnfeld wird angezeigt, aber "undefiniert".


Wenn Sie es insgesamt ändern können, würde ich empfehlen, Ihren beiden Eingabefeldern ein Feld "id" hinzuzufügen und zu verwenden document.getElementById, das genau einen Wert zurückgibt.
Odi

4
Besser noch : var inputs = document.getElementsByTagName('input'), gibt eine Knotenliste zurück, aus der Sie beide Elemente wie folgt extrahieren können: var pass = inputs.item ('pass'). Nur ein Tipp, dies kann die Dinge beschleunigen, wenn Sie mit einem großen DOM zu tun haben, da getElementByIdjedes Mal der gesamte Baum durchsucht wird, während dies bei einer Knotenliste nicht der
Fall ist.

Kleiner süßer Code in der Tat XD
Guillermo Gutiérrez

Antworten:


246

Der Grund, warum Sie diesen Fehler sehen, ist, dass document.getElementsByNameein NodeListElement zurückgegeben wird. Und ein NodeListElement hat keine .valueEigenschaft.

Verwenden Sie stattdessen Folgendes:

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

30

Beachten Sie den Plural in dieser Methode:

document.getElementsByName()

Das gibt ein Array von Elementen zurück. Verwenden Sie also [0], um das erste Vorkommen zu erhalten, z

document.getElementsByName()[0]

8
Es ist kein Array, es ist eine NodeList :-)
Florian Margaine

1
@FlorianMargaine - Eigentlich ist es eine HTMLCollection ;)
j08691

1
@ j08691 nein :) aber es kann leicht verwirrt sein: p
Florian Margaine

Was ist die Definition eines Arrays und wie unterscheidet sich das? Eine NodeList ist nur ein Objekt, das mit einigen praktischen Methoden um ein Array von HTMLElements gewickelt ist. Wie auch immer, um es in Laienbegriffen für das OP auszudrücken, sagte ich ein Array.
Ozzy

1
Ein Array verfügt über viel mehr Methoden als eine NodeList. Ein NodeList einige Methoden / Eigenschaften von Arrays wie das nimmt lengthEigenschaft, aber es fehlt auch eine Menge von Methoden, wie zum Beispiel map, forEachusw. , die erklärt , warum wir verwenden müssen: Array.prototype.forEach.call( NodeList, fn ).
Florian Margaine

11

Du willst das:

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

    alert (acc);
}

Vielen Dank, dass Sie das Beispiel des OP in Ihrer Antwort verwendet haben.
Kris Boyd

@KrisBoyd, der Unterschied ist, dass ich das erste Element aus dem Array erhalte, das von zurückgegeben wird getElementsByName. Vielleicht hätte ich das klarer machen sollen - Sie können es jederzeit bearbeiten, wenn Sie möchten.
Elliot Bonneville

Ich habe dir eine Ergänzung gegeben :) Keine der höheren Antworten bildet es im gleichen Format beim OP
Kris Boyd

6

Die Methode document.getElementsByName gibt ein Array von Elementen zurück. Sie sollten zum Beispiel zuerst auswählen.

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

4
Es ist kein Array, es ist eine NodeList :-)
Florian Margaine

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.