Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript passwortabfrage
#2
Hi Dirk07 ,

du hast leider den falschen Selektor für das input-Element für das Passwort verwendet. Hier kannst dem input-Element direkt mit einer ID anprechen. Das erspart alles.

Hier mein Codebeispiel:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        #passContainer {
            width: 250px;
            display: flex;
            flex-direction: column;
        }
        #passContainer label {
            margin-bottom: 8px;
        }
        #passContainer input[type=password] {
            height: 36px;
            box-sizing: border-box;
            padding: 0 6px;
            margin-bottom: 16px;
        }
        #passContainer input[type=password]:focus {
            outline: none;
            border: 1px solid #2d53dc;
        }
        #passContainer input[type=button] {
            height: 36px;
            border: 0;
            cursor: pointer;
            color: #fff;
            background-color: #2d53dc;
        }
    </style>
    <script>
        // Deklariere zwei leere Variablen
        let meinPasswort, meinButton;
        // Erst Wenn der DOM fertig geladen wurde wird das Script ausgeführt, sonst kommt es zu Fehlern
        // Ein EventListener der feuert wenn das DOM fertig geladen wurde. Dann startet die Funktion init
        document.addEventListener("DOMContentLoaded", init);
        // Die eigentliche Funktion um ein EventListener für den Button hinzuzufügen
        function init() {
            // Speicher das Element meinPasswort in Variable
            meinPasswort = document.getElementById('meinPasswort');
            // Speicher das Element meinButton in Variable
            meinButton = document.getElementById('meinButton');
            // Füge ein EventListener für meinButton hinzu der auf click-Events reagiert
            meinButton.addEventListener("click", auswerten);
        }
        // Die Funktion Auswertung wird über den EventListener aufgerufen wenn der Button geklickt wurde
        function auswerten() {
            // Einfache Passwortabfrage
            if(meinPasswort.value=="test") {
                alert('Sie werden gleich automatisch weitergeleitet.');
                // Weiterleitung zu einer anderen Seite
                document.location = "https://www.google.com";
            } else {
                alert("Passwort falsch: Bitte versuchen Sie es noch einmal!");
            }
        }
    </script>
</head>
<body>
    <h1>Password:</h1>   
    <div id="passContainer">
        <label for="meinPasswort">Passwort</label>
        <input id="meinPasswort" type="password" autofocus>
        <input type="button" value="Login" id="meinButton">
    </div>   
</body>
</html>

Wenn du weitere Fragen dazu hast, dann einfach in diesem Thread schreiben.

Viel Erfolg
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Nachrichten in diesem Thema
Javascript passwortabfrage - von Dirk07 - 15.02.2024, 14:23
RE: Javascript passwortabfrage - von rzscout - 16.02.2024, 03:15
RE: Javascript passwortabfrage - von Dirk07 - 16.02.2024, 11:52
RE: Javascript passwortabfrage - von rzscout - 16.02.2024, 20:09

Gehe zu:


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