Ein einfaches JS + HTML-Skript nicht funktioniert für mich richtig

Question

Ich habe den folgenden Code bekommt:

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;"> 
     <button onclick="usernamePrompt()">Click to enter the username</button> 
     <button onclick="passwordPrompt()">Click to enter the password</button> 
     <button onclick="verify()">Verify here</button> 
    </div> 
    <div style="text-align: center;margin: auto;display: block;padding: 20px;"> 
     <p style="text-align: center;font-size: 20px;" id="verifyPara"></p> 
    </div> 
    <script type="text/javascript"> 
     function usernamePrompt() { 
      window.username = prompt('Enter username:'); 
     }; 
     function passwordPrompt() { 
      window.password = prompt('Enter password:'); 
     }; 
     function verify (username,password) { 
      if (username === "immoral" && password ==="koala") { 
       document.getElementById('verifyPara').innerHTML='Success!'; 
      } else { 
       document.getElementById('verifyPara').innerHTML='Fail!'; 
       delete username; 
       delete password; 
      }; 
     } 
    </script> 

Wann immer ich diesen Code versuchen, natürlich, ich die Daten in dem beide ‚Aufforderung der einreichen. Ich verwende diese Daten in der if-else-Anweisung, und wenn der gesendete Benutzername und die Passwörter benötigt werden, sollte "Success" (Erfolg) erzeugt werden, andernfalls sollte "Fail" (Fehler) erzeugt werden.
Das Problem ist, dass es nie "Erfolg" produziert und immer ein "Fail" ist. Was stimmt nicht mit dem Code? Bitte helfen Sie. Danke

Answer 1

Da Sie die Variablen global deklarieren, können Sie sie einfach überprüfen.

function verify() { 
    if (window.username === "immoral" && window.password === "koala") { 
     document.getElementById('verifyPara').innerHTML = 'Success!'; 
    } else { 
     document.getElementById('verifyPara').innerHTML = 'Fail!'; 
     delete username; 
     delete password; 
    }; 
} 

https://jsfiddle.net/0s2fL79r/1/

Answer 2

Das erste, was ich brauche, zu sagen, dass Sie nicht durch ein Passwort als Textfeld mit Javascript prompt.Well, für Ihre Lösung nehmen Sie zwei versteckte fields-- einen für Benutzernamen festlegen können und eine andere für das Passwort. Setzen Sie den Wert nach der Eingabeaufforderung. Wenn Sie vergleichen, vergleichen Sie den versteckten Wert. Wieder sagte ich, das ist nicht die Praxis im wirklichen Leben. Sie können es sehen, um besser zu verstehen, wie Javascript funktioniert.
Siehe den Code unten:

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;"> 
     <button onclick="usernamePrompt()">Click to enter the username</button> 
     <button onclick="passwordPrompt()">Click to enter the password</button> 
     <button onclick="verify()">Verify here</button> 
    </div> 
    <div style="text-align: center;margin: auto;display: block;padding: 20px;"> 
     <p style="text-align: center;font-size: 20px;" id="verifyPara"></p> 
    </div> 
    <input type="hidden" id="userName"/> 
    <input type="hidden" id="password"/> 
    <script type="text/javascript"> 

     function usernamePrompt() { 
      var username = prompt('Enter username:'); 
      document.getElementById('userName').value= username; 
     }; 
     function passwordPrompt() { 
      var password = prompt('Enter password:'); 
      document.getElementById('password').value = password; 
     }; 
     function verify () { 
      if (document.getElementById('userName').value == "immoral" && document.getElementById('password').value =="koala") { 
       document.getElementById('verifyPara').innerHTML='Success!'; 
      } else { 
       document.getElementById('verifyPara').innerHTML='Fail!'; 


      }; 
     } 
    </script> 

Answer 3

Der Grund für Ihre Fehler ist, dass Sie auf Ihre verify Funktion nicht vorbei Parameter wurden. Einfach Parameter übergeben und es wird funktionieren.

function usernamePrompt() { 
 
      window.username = prompt('Enter username:'); 
 
     }; 
 
     function passwordPrompt() { 
 
      window.password = prompt('Enter password:'); 
 
     }; 
 
     function verify (username,password) { 
 
      if (username === "immoral" && password ==="koala") { 
 
       document.getElementById('verifyPara').innerHTML='Success!'; 
 
      } else { 
 
       document.getElementById('verifyPara').innerHTML='Fail!'; 
 
       delete username; 
 
       delete password; 
 
      }; 
 
     }

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;"> 
 
     <button onclick="usernamePrompt()">Click to enter the username</button> 
 
     <button onclick="passwordPrompt()">Click to enter the password</button> 
 
     <button onclick="verify(window.username, window.password)">Verify here</button> 
 
    </div> 
 
    <div style="text-align: center;margin: auto;display: block;padding: 20px;"> 
 
     <p style="text-align: center;font-size: 20px;" id="verifyPara"></p> 
 
    </div>

Answer 4

Der Grund, warum man immer ‚nicht bestanden‘ ist, dass Sie vorbei Variablen sind username und password auf Ihre verify(username, password) Funktion, diese Variablen sind lokale Funktion zu überprüfen (nicht sie mit globalen Variablen mischen) ... In JavaScript, wenn wir lokale und globale Variablen mit dem gleichen Namen haben dann verbirgt lokale Variablen die globalen Variablen ... das gleiche ist der Fall mit Ihrem Code .. Innerhalb Verify-Funktion greifen Sie auf lokale Variablen (nicht globale bcz der gleichen Name) .. also müssen Sie sie aus den Argumenten entfernen und das machen Vergleich mit globalen Variablen ... Obwohl es nicht ein guter Ansatz, Variablen im globalen Bereich zu speichern und sie so verwenden, aber aus Gründen Ihrer Probleme ist eine mögliche Lösung ...

<script type="text/javascript"> 
    function usernamePrompt() { 
     window.username = prompt('Enter username:'); 
    }; 
    function passwordPrompt() { 
     window.password = prompt('Enter password:'); 
    }; 
    function verify() { 
     if (window.username === "immoral" && window.password ==="koala") { 
      document.getElementById('verifyPara').innerHTML='Success!'; 
     } else { 
      document.getElementById('verifyPara').innerHTML='Fail!'; 
      delete window.username; 
      delete window.password; 
     }; 
    } 
</script>