html und javascript password: Wie ändert man die Anzeige eines Elements, wenn das Passwort korrekt ist?

Question

Ich muss ein Passwort-geschütztes Bild in HTML mit Hilfe von Javascript machen, was bedeutet, wenn Sie ein richtiges Passwort eingeben, würde ein Bild erscheinen.Ich bin ein Anfänger, so dass ich keinen Fehler in diesem finden kann. Ich weiß nicht einmal ob, wenn dieser Code gut geschrieben ist, so würde ich sehr dankbar sein, wenn Sie helfen könnten.

HTML:

<img src="..." id="smiley"/> 
    <form> 
     This picture is password protected<br>Enter a password:<br> 
     <input type="password" name="password" id="password"> 
     <input type="button" onclick="funcPass();" value="Ok"> 
    </form> 

JavaScript:

var password = getElementById("password").value; 
    function funcPass(password.value) { 
     if (password.value == "smiley") 
     { 
      document.getElementById("smiley").style.display = "block"; 
     } 
     else 
     { 
      password.value = " "; 
     } 
    } 

In CSS Ich änderte Bildanzeige-Eigenschaft auf keine

Answer 1

Ihr Code, um das Passwort zu erhalten muss sein in der Funktion selbst. Sie erhalten auch den Wert zweimal (der Wert des Werts). Versuchen Sie folgendes:

function funcPass() { 
    var password = document.getElementById("password").value; 
    if (password == "In A Darkened Room") 
    { 
     document.getElementById("smiley").style.display = "block"; 
    } 
    else 
    { 
     password = ""; 
    } 
} 

Answer 2

Probleme:

1. Ihre variable password außerhalb Ihrer Funktion deklariert, so dass es nicht als Parameter übergeben werden muss.

2. Ich änderte Ihre password Variable, um nur einen Verweis auf das #password Element selbst zu enthalten, so dass Sie seinen Wert erhalten, wie es später ändert.

3. Geändert getElementById zu document.getElementById, um zu verhindern, dass es einen Fehler wirft.

Hier ist eine funktionsfähige Demo:

var password = document.getElementById("password"); 
 

 
function funcPass() { 
 
    if (password.value == "In A Darkened Room") { 
 
    document.getElementById("smiley").style.display = "block"; 
 
    } else { 
 
    password.value = ""; 
 
    } 
 
}

img { 
 
    border: 1px solid red; 
 
    width: 50px; 
 
    height: 50px; 
 
    display: none; 
 
}

<img src="..." id="smiley" /> 
 
<form> 
 
    This picture is password protected<br>Enter a password:<br> 
 
    <input type="password" name="password" id="password"> 
 
    <input type="button" onclick="funcPass();" value="Ok"> 
 
</form>