Login

Dirk07 · 15.02.2024, 14:23

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

***rzscout*** · 16.02.2024, 03:15

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

Dirk07 · 16.02.2024, 11:52

1000 dankt das klappt super

***rzscout*** · 16.02.2024, 20:09

gerne ;-)

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken