• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Button Text nach Klick 3 Sekunden ausgeben

M

Makes

Neues Mitglied
Liebe Pros :)
Ich habe ein kleines Script für eine einfache Passwortabfrage erstellt (die Sicherheit spielt hierbei keine Rolle ;)
- ist für ein Spiel.

<html>
<head>
<style>
section {
display: flex;
align-items: center;
justify-content: center;
height: 900px;
width: 50%;
text-align: center;
margin: auto;
</style>
</head>
<body>
<section>
<form name="login">
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="System wiederherstellen / Restore System"/>
</form>
</section>
<script language="javascript">
function check(form)
{

if(form.pswrd.value == "12345")
{
window.location.href = "../loading.html"
}
else
{alert("Falsches Passwort, Wrong Password")
}
}
</script>
</body>
</html>

Funktioniert auch super - aber ich würde gerne folgendes ändern:
else
{alert("Falsches Passwort, Wrong Password")

Bei falscher Passworteingabe nich einem Browser "Alarm" ausgeben sonder als Text der kurz erscheint und zB dann nach 3 Sekunden wieder verschwindet.

Könnte mir da jemand weiter helfen? Wäre euch mega dankbar!
Herzlichen Gruss,
Markus
 
Du machst ein Element fertig . zb <div id="info"></div>
Dann fliegt der Alert raus.
Dann kommt ein innerHTML wo der Text steht.
Das innerHTML wird mit setTimeout nach 3 Sekunden überschrieben oder mit display none wieder ausgeblendet
 
super danke für die super schnelle Rückmeldung!! - das übersteigt leider etwas meine Fähigkeiten :S (obwohl für euch sicher kein Thema... ;) )
- Das DIV Element fest anlegen im Body?
Danach das innerHTML in der Else Funktion einbauen? - das inner html muss dann den Text in das DIV laden?
 
Jo das div da hin wo du es angezeigt haben möchtest.
Das InnerHTML in den else
Code: 
     inf.style.display='block';
     inf.innerHTML='Passwort Falsch';
  setTimeout(function(){
     inf.style.display='none';
  },3000)
Den Rest solltest du dann hinbekommen.

Das inf ist eine Varaible wo das div id="info" angesprochen wird
 
Dank dir vielmals für deinen Support!
Hab das nun so probiert


HTML: 
<html>
<head>
<style>
section {
display: flex;
align-items: center;
justify-content: center;
height: 900px;
width: 50%;
text-align: center;
margin: auto;
</style>
</head>
<body>
<section>
<form name="login">
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="System wiederherstellen / Restore System"/>
<div id="info"></div>
</form>
</section>
<script language="javascript">
function check(form)
{

if(form.pswrd.value == "12345")
{
window.location.href = "../loading.html"
}

else
{inf.style.display='block';
inf.innerHTML='Passwort Falsch';
setTimeout(function(){
inf.style.display='none';},3000)
}

}
</script>
</body>
</html>

Das Div wäre auch an "der Richtigen" stelle - aber die Ausgabe funktioniert noch nicht.
Was mach ich noch falsch?
Danke schon vorab für deine Zeit, und sorry für den Aufwand - bin in dem Thema noch ziemlich frisch.
 
Füge mal als erste Zeile in deinem 'else' Block im deinem Script folgende Zeile hinzu:
Javascript: 
inf = document.getElementById("info");
 
Um deinen jetzigen Code noch aktuell zu halten machen wir
oncklick und language gedöns weg ,
fügen einen doctype ein
schließen die Klammer in der Css,

und geben noch einen netten Hinweiß dazu das man das Passwort richtig eingegeben hat und nun weiter geleitet wird ( dieser Punkt ist unwichtigi)

HTML: 
<!doctype html>
<html lang="de">
   <head>
      <title>  Passwort eingabe</title>
      <style>
         .logarea{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 200px;
                width: 50%;
                text-align: center;
                margin: auto;
         }
         #info{
                opacity:0;
                color:red;
                height:24px;
                font-size:20px;
                transition:all 800ms;
         }
     </style>
  </head>
<body>
  <div class="logarea">
    <form name="login">
      <div id="info"></div>
      Password<input type="password" id="pass" name="pswrd">
      <input type="button" id="go" value="System wiederherstellen / Restore System"/>
    </form>
  </div>
  <script>
  document.getElementById('go').addEventListener('click',function(){
      var inf=document.getElementById('info');
      var password=document.getElementById('pass');
      if(password.value == "bitte_lernen"){
         inf.style.opacity='1';
         inf.innerHTML='Passwort Korrekt ,du wirst jetzt weitergeleitet';
         inf.style.color="green";
         setTimeout(function(){
               window.location.href = "../loading.html";
         },3000)
      }else{
         inf.style.opacity='1';
         inf.innerHTML='Passwort Falsch';
         setTimeout(function(){
            inf.style.opacity='0';
         },3000)
      }
  });
</script>
</body>
</html>
 
Zuletzt bearbeitet:
:smile: Wau so wird das ganze ja noch richtig professionell :smile: - und eventuell mal auch noch für sonst jemand brauchbar!! Danke vielmals für den Support und die Inputs - tolle Arbeit leistet ihr hier!!
 
Makes schrieb:
und eventuell mal auch noch für sonst jemand brauchbar!!
Zum Vergrößern anklicken....
Das glaube ich ehr nicht.
Zumindest das mit der Passworteingabe geht gar nicht.
Auch wenn das ein Spiel ist ,wäre es trotzdem ein No-go.
Für dich zuhause ist es vieleicht Ok.
Für alles andere wo jemand Fremdes dran kommt ( Webseite, Netzwerke oder Zuhause der große Bruder ), sollte man Php nutzen oder sich was besseres einfallen lassen als das Password in den Quellcode zu schreiben.
 
Hallo zusammen
Ich hätte noch einmal eine Frage zum Code - Ich habe noch probiert die "Enter" Taste mit einzubinden, sodass dass das "Passwort" mit Klick auf den Button oder mit der Enter Taste geprüft wird.

Als Grundcode habe ich folgendes dazu


Code: 
var input = document.getElementById("myInput");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});


Jetzt hab ich das aber nicht geschafft in meinem Passwort Code richtig zu verschachteln.
Zuerst noch "Originalcode":


Code: 
<!doctype html>
<html lang="de">
   <head>
      <title>  Passwort eingabe</title>
      <style>
         .logarea{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 1200px;
                width: 50%;
                text-align: center;
                margin: auto;
         }
         #info{
                opacity:0;
                color:red;
                height:24px;
                font-size:20px;
                transition:all 800ms;
         }
#go{
                color:black;
                font-size:15px;
                -webkit-transition-duration: 0.4s; /* Safari */
                 transition-duration: 0.4s;
                }
#go:hover {
  background-color: #555555;
  color: white; }

     </style>
  </head>
<body>
  <div class="logarea">
    <form name="login">
      <div id="info"></div>
      Password<input type="password" id="pass" name="pswrd">
      <input type="button" id="go" value="System wiederherstellen / Restore System"/>
    </form>
  </div>
  <script>
  document.getElementById('go').addEventListener('click',function(){
      var inf=document.getElementById('info');
      var password=document.getElementById('pass');
      if(password.value == "12345"){
         inf.style.opacity='1';
         inf.innerHTML='Passwort Korrekt';
         inf.style.color="green";
         setTimeout(function(){
               window.location.href = "../loading";
         },3000)
      }else{
         inf.style.opacity='1';
         inf.innerHTML='Passwort Falsch';
         setTimeout(function(){
            inf.style.opacity='0';
         },3000)
      }
  });
</script>
</body>
</html>




Code wo ich probiert habe den "Enter" Code mit ein zu binden:
Code: 
<!doctype html>
<html lang="de">
   <head>
      <title>  Passwort eingabe</title>
      <style>
         .logarea{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 1200px;
                width: 50%;
                text-align: center;
                margin: auto;
         }
         #info{
                opacity:0;
                color:red;
                height:24px;
                font-size:20px;
                transition:all 800ms;
         }
 #go{
                color:black;
                font-size:15px;
                -webkit-transition-duration: 0.4s; /* Safari */
                 transition-duration: 0.4s;
                }
 #go:hover {
  background-color: #555555;
  color: white; }

     </style>
  </head>
<body>
  <div class="logarea">
    <form name="login">
      <div id="info"></div>
      Password<input type="password" id="pass" name="pswrd">
      <input type="button" id="go" value="System wiederherstellen / Restore System"/>
    </form>
  </div>
  <script>
  document.getElementById("pass").addEventListener("keyup", function(event) {
  if (event.keyCode = 13) {
   event.preventDefault();
  document.getElementById('go').addEventListener('click',function(){
      var inf=document.getElementById('info');
      var password=document.getElementById('pass');
      if(password.value == "12345"){
         inf.style.opacity='1';
         inf.innerHTML='Passwort Korrekt';
         inf.style.color="green";
         setTimeout(function(){
               window.location.href = "../loading";
         },3000)
      }else{
         inf.style.opacity='1';
         inf.innerHTML='Passwort Falsch';
         setTimeout(function(){
            inf.style.opacity='0';
         },3000)
      }
  });
</script>
</body>
</html>


Ich sehe den Fehler aber irgendwie nicht :S..könntet ihr mich da nochmals unterstützen?
Danke vorab für eure wertvolle Hilfe!
 
Zuletzt bearbeitet:
zähl mal deine Klammern.

Deine form Elemente müssen dann auch weg weil durch den Enter klick ,das form Element die Seite neuladen tut.
Ist nee Mist erklärung aber besser errklären kann ich es nicht
 
Basti dank dir vielmals für deine unermüdliche Hilfe.
Klammer habe ich gesehen :S...half aber noch nicht bis zum finale ;)

Ich verstehe das mit neu laden ein bisschen aber irgendwie auch wieder nicht :)...

in dem Beispielcode funktioniert das ohne neu laden da ja die Enter Taste quasi den Button triggert. - aber liegt das auch noch an dem Button type? da ich da bereits in einer "Einfach Code Variante" scheitere - wenn ich den Code ohne "Passwort auslese" einbauen
 
Zb ein submit Button läd die Seite auch neu.
die <form> Tags reagieren auf die Enter Taste auch und laden die Seite neu.

Wenn du die Klammern richtig gezählt hast, und dann den Fehler aus der If Abfrage beheben tust sollte das schon gehen.

Ich würde das dann aber trotzdem noch etwas ändern.
HTML: 
<!doctype html>
<html lang="de">
   <head>
      <title>  Passwort eingabe</title>
      <style>
         .logarea{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 1200px;
                width: 50%;
                text-align: center;
                margin: auto;
         }
         #info{
                opacity:0;
                color:red;
                height:24px;
                font-size:20px;
                transition:all 800ms;
         }
         #go{
                color:black;
                font-size:15px;
                -webkit-transition-duration: 0.4s; /* Safari */
                 transition-duration: 0.4s;
         }
         #go:hover {
                background-color: #555555;
                color: white;
         }
     </style>
  </head>
<body>
  <div class="logarea">
    <div>
      <div id="info"></div>
      Password<input type="password" id="pass" name="pswrd">
      <input type="button" id="go" value="System wiederherstellen / Restore System"/>
    </div>
  </div>
  <script>
  document.getElementById("pass").addEventListener("keyup", function(event) {
     if (event.keyCode==13) {
         pass_test();
    }
  });
  document.getElementById('go').addEventListener('click',function(){
         pass_test();
  });
  function pass_test(){
      var inf=document.getElementById('info');
      var password=document.getElementById('pass');
      if(password.value == "12345"){
         inf.style.opacity='1';
         inf.innerHTML='Passwort Korrekt';
         inf.style.color="green";
         setTimeout(function(){
               window.location.href = "../loading";
         },3000)
      }else{
         inf.style.opacity='1';
         inf.innerHTML='Passwort Falsch';
         setTimeout(function(){
            inf.style.opacity='0';
         },3000)
      }
   }
   </script>
</body>
</html>
Aber das macht jeder anders , bzw jeder bevorzugt seinen eigenen Weg.
Falls es Technisch nicht korekkt ist wird sich schon einer melden wenn ich falsch liege
 
Basti vielen Dank! jetzt verstehe ich auch wie du das meintest!
...die Abfrage ist mir so jetzt auch logisch!

Danke nochmals!! hast mir wirklich sehr geholfen!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben