pfand1879
19.10.2022, 21:18
HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

    <meta charset='utf-8'>

    <meta http-equiv='X-UA-Compatible' content='IE=edge'>

    <title>Input to Variable</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>

    <script src='main.js'></script>

    <script>

        var input = "Wie bekomme ich den eingegebenen input hier hin?"

    </script>

</head>

<body>

        <input type="text" id="inputValue">

        <button>Submit</button>

</body>

</html>

 ...zum Beitrag
Antwort
von verreisterNutzer
19.10.2022, 21:37

So würde es gehen (siehe Kommentare):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Input to Variable</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="main.js"></script>
    <script>
        // warten, bis die Seite vollständig geladen wurde
        window.onload = function() {
            // input-Element auswählen
            var inputBox = document.getElementById("inputValue");
            
            // wenn der Button angeklickt wird (click-Event)
            document.getElementById("submitButton")
                .addEventListener("click", function() {
                    // Inhalt des Eingabefeldes auslesen
                    var input = inputBox.value;
                    alert("Die Eingabe lautet: " + input);
                });
        };
    </script>
</head>
<body>
    <input type="text" id="inputValue">
    <!-- Der Button sollte eine ID haben (submitButton), um ihn im obigen Skript auszuwählen. -->
    <button id="submitButton">Submit</button>
</body>
</html>
...zur Antwort