Menu
I have hidden images in several different DIV using embedded css in my head for my html file but I want to show an specify image using Javascript. For example a pop-up will ask the user which photo will they like to see and to type in what they have choosen and only that photo will pop. So now that I have hidden my image it doesn't want to appear even tho tell it to become visible in my javascript. What am I doing wrong??? BTW the images have to be assign DIV classes. here is my code.
<html>
<head>
<style>
body{background-image:url(http://www.desktopaper.com/wp-content/uploads/simple-stars-background-by-fantmayo-dibs.jpg)
}
h1{
margin-bottom:0;
background-color:white;
height:40px;
width:200px;
}
p{
background-color:#200000;
color:white;
height:250px;
width:900px;
float:left;
}
#Uhura,#Sulu,#Scotty{
position:relative;
background-color:#6E6E6E;
height:20px;
width:300px;
margin-left:900px;
display:none;
}
</style>
</head>
<body>
<h1><pre>Title Title</pre></h1>
<p>text text</p>
<div id="Scotty">
<img src="images/scotty.jpg" alt="Scotty" width="300" height="300">
</div>
<div id="Uhura">
<img src="images/uhura.jpg" alt="Uhura" width="300" height="300">
</div>
<div id="Sulu">
<img src="images/sulu.jpg" alt="Sulu" width="300" height="300">
</div>
<script>
var choice;
do{
choice = window.prompt("Which of these Star Trek members wil you like to see?Enter S for Scotty, U for Uhura, or L for Sulu");
choice = choice.toUpperCase();
} while (choice != 'S' && choice != 'U' && choice !='L');
var member;
if(choice == 'S'){
member = "Scotty";
document.getELementById("Scotty").style.visibility='visible';
}else if(choice == "U"){
member = "Uhura";
document.getELementById("Uhura").style.visibility='visible';
}else{
member= "Sulu";
document.getELementById("Sulu").style.visibility='visible';
}
</script>
</body>
</html>
407
asked Jan 24 '26 01:01
It is because you are using two different visual display styles.
You use display: none; to hide the images, which is okay (this does stop the image from loading though). Then you try to display them with visibility: visible. The content is still hidden because you didn't change the display style to block.
Instead of using visibility: visible using display: block;
if(choice == 'S'){
member = "Scotty";
document.getElementById("Scotty").style.display ='block';
}else if(choice == "U"){
member = "Uhura";
document.getElementById("Uhura").style.display = 'block';
}else{
member= "Sulu";
document.getElementById("Sulu").style.display = 'block';
}
Also, don't know if it was a copy & paste thing, but it is getElementById not getELmentById.
Some additional info about display vs visibility.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
