Search code examples
javascriptconditional-statementsgetelementbyidprompt

conditional statment in prompt


I'm working on providing a user with two different pictures depending on the right username/password. I'm having a prompt popup for the user to give the username/password and after providing the right credentials the login picture should appear and if the credentials are wrong the logout picture should appear. I am using the getElementById to change accordingly. At this moment the prompt shows up, but there is no picture showing.

<img src="user_in.PNG" id="user_in_id" hidden>
<img src="user_out.PNG" id="user_out_id" hidden>

<script> 
      
     var person = prompt("Please enter your name", ""); 
     var password = prompt("Please enter your password", "");
     if (person == "admin" && password =="admin") {
        alert("Welcome, You are now Logged in");
        document.getElementById("user_in_id");

      }else
        alert("wrong username or password");
        document.getElementById("user_out_id");
      
</script>

Solution

  • You have to apply a function to your document.getElementById("user_in_id") selector,which somehow makes the selected element visible.

    One way would be to remove the hidden attribute from it with document.getElementById("user_in_id").removeAttribute("hidden");

    You also forgot to wrap your else statement around curly brackets in order to work properly.

    <img src="https://styles.redditmedia.com/t5_3obin/styles/communityIcon_5v6pv5kqz5241.PNG" id="user_in_id" hidden>
    <img src="https://public.blenderkit.com/thumbnails/assets/0992088bfb844c69bb6e426272970c8b/files/thumbnail_c858218a-4afc-4e94-b6b9-080f5e6c7066.jpg.256x256_q85_crop-%2C.jpg" id="user_out_id" hidden>
    
    <script>
        var person = prompt("Please enter your name", ""); 
        var password = prompt("Please enter your password", "");
         if (person === "admin" && password === "admin") {
            alert("Welcome, You are now Logged in");
            document.getElementById("user_in_id").removeAttribute("hidden");
    
          }else{ 
           alert("wrong username or password");
           document.getElementById("user_out_id").removeAttribute("hidden");
          }
            
          
    </script>