Login

14.10.2022, 18:36

Hallo ich habe ein Problem! Ich programmiere eine Vokabel-App und habe schon Folgendes programmiert:

Code:
<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Vokabel-Play</title>

</head>

<body>

<h1><b><u>Grundlagen 1</u></b></h1>

<br>

<h3>ERSTEN</h3>

Schreibe Hallo auf Englisch:

<form>

<label for="vokabel">Vokabel

    <input id="vokabel" name="vokabel">

  </label>

</form>

    <script>

if (vokabel = hello) {alert(Lol)}

else{alert("Falsch") }

    </script>

</body>

</html>

Wenn man die Website öffnet erscheint ein Input Feld das ich mithilfe von html gecodet habe.
Ich will das wenn die Vokabel richtig ist ein alert erscheint.
Mein Problem: Ich weiss nicht wie ich diesen html Input mit JavaScript verbinden kann.
Ich hoffe jemand versteht dieses Problem und kann mir helfen!

LG

***rzscout*** · 16.10.2022, 20:12

Hi Starrattom,

gerne helfe ich dir weiter. Wenn du auf einem Element zugreifen möchtest in JavaScript musst über das DOM darauf zugreifen Entweder als document.getElementById("vokabel) oder über document.querSelector("#vokabel") kannst du das entsprechende Inputfeld selektieren. Jetzt möchtest du den Wert aus dem Inputfeld haben zum vergleichen. Dafür verwendest du dann vokabel.value. Das wars auch schon. Hier ein sehr reduziertes Beispiel.

Code:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Vokabeltest, Englisch</title>

    <script>

        function test() {

            // Speicher das Ergebnis vom Input-Element in die Variable vokabel

            var vokabel = document.getElementById('vokabel').value;

            // Schreibt die Vokabel klein, falls man Hello oder hello schreibt bleibt beides richtig

            vokabel = vokabel.toLowerCase();

            // Eine If-Kontrollstruktur

            if(vokabel == "hello") {

                alert("Das ist richtig!");

            } else {

                var str = "Das Wort: " + vokabel + " ist leider falsch! Versuche es noch einmal.";

                alert(str);

            }

        }

    </script>

</head>

<body>

    <h1>Englischvokabeltest</h1>

    <p>Bitte geben Sie das englische Wort für Hallo ein.</p>

    <input type="text" placeholder="Hier Vokabel eigeben" id="vokabel">

    <button onclick="test()">Vokabel prüfen</button>

</body>

</html>

Ich würde es natürlich ganz anders aufbauen, aber um es besser zu verstehen ist diese Beispiel am besten.

Viel Erfolg und wenn du weitere Fragen hast, immer her damit.

Viele Grüße

rzscout

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken