This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
html input mit JavaScript verbinden
#1
Question 
Hallo ich habe ein Problem! Ich programmiere eine Vokabel-App und habe schon Folgendes programmiert:
<!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
Zitieren
#2
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.

<!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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste