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>
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>