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

javascript html dom Juliver Galleto
quelle

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

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

Aidanc
quelle

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]

Ozzy
quelle

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);
}

Elliot Bonneville
quelle

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

Dalazx
quelle

4

Es ist kein Array, es ist eine NodeList :-)

Florian Margaine

5

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

Sam Battat
quelle

1

Um ganz klar zu sein: Dies ist ein Element aus einer NodeList. :)

Christian Neverdal

JavaScript erhält Element nach Namen

Antworten: