Werte auslesen

Rund um input / select – Werte mit Javascript auslesen

Wenn ein User Werte in ein HTML Document eingibt können diese für die weitere Bearbeitung genutzt werden. Dies ist mit Javascript möglich.

Die Methode Document.getElementsByName() greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein name-Attribut besitzt. Sie liefert eine sogenannte „live node list“ als Rückgabewert, über die der Zugriff auf die gefundenen Elemente ermöglicht wird.

Vor längerer Zeit mussten input Felder immer in einem Form Element in HTML definiert werden. Das ist nicht mehr der Fall.

Der Wert von Eingabefeldern ist immer ein String, auch wenn der Benutzer bei type = „number“ nur Ziffern eingibt. Formulare sind String-Verarbeitung in Reinform.

Durch das Festlegen einer id auf den HTML Tag kann über Javascript direkt darauf zugegriffen werden.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Inner HTML</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
   </head>
<body>
    <h1 id="ueberschrift">Zugriff auf ein HTML Element</h1>
    <script>
document.getElementById("ueberschrift").innerText="Beispiel für einen Zugriff";
    </script>
</body>
</html>

Durch diesen Code wird die Überschrift auf Beispiel für einen Zugriff geändert.

Eine Eingabe kann auch ausgelesen werden. In diesem Beispiel wird der Username überprüft:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Get Elements im Eingabefeld</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
       
</head>
<body>
    Bitte den Usernamen eingeben: <input type="text" id=eingabe>
    <input type="button" value="Prüfen" onclick="pruefung()">
</body>
<script>
    function pruefung() {
    let username=document.getElementById("eingabe").value;
    if (username=="michi")
    {
        alert ("Ja, korrekt");
    } else
    {
        alert ("Nein, leider falsch");
    }
    }

</script>
</html>

Über document.getElementById(„eingabe“).value wird die Eingabe abgerufen und dann mit if / else überprüft.