Javascript-forum
Javascript passwortabfrage - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Javascript passwortabfrage (/showthread.php?tid=2758)



Javascript passwortabfrage - Dirk07 - 15.02.2024

Hallo zusammen ich habe da ein Problem und zwar möchte ich eine passwortabfrage mit Javascript realisieren den Scrip habe ich soweit und ja ich weiß das es nicht sicher ist und ausgelesen werden kann

<html>
<head>
<title>rab</title>
<div style="display:block" id="formular"><center> 
<script language="javascript"> 
function pasuser(form) {
if (form.pass.value=="test") {                
    document.getElementById ("hidden").style.display = "block"; 
    document.getElementById ("formular").style.display = "none"; 
} else {
alert("Invalid Password") 
}
}
</script>
 
<h1>Password:</h1>
<form name="login"> 
<input name="pass" select="on" type="password" align="center"><br> 
<input type="button" value="Login" onClick="pasuser(this.form)"> 
<input type="Reset"></center> 
</form>
</div>
 
Mein Problem ist jetzt aber das nichts geschieht wenn das Passwort richtig ist was muss ich machen damit ich nach richtigem Passwort zu Seite xyz.html weitergeleitet werde


RE: Javascript passwortabfrage - rzscout - 16.02.2024

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


RE: Javascript passwortabfrage - Dirk07 - 16.02.2024

1000 dankt das klappt super


RE: Javascript passwortabfrage - rzscout - 16.02.2024

gerne ;-)