My image is not becoming visible after commanding it with javascript?

Question

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>

You have `display: none` in your CSS, but you are setting `visiblity: visible` in your javascript. — Emanuel Vintilă, May 30 '14 at 18:51
thats because you set the display to none... and not the visibility to hidden. style.display="block"; instead of style.visibility="hidden"; — , May 30 '14 at 18:51

score 2 · Answer 1 · edited May 23 '17 at 10:26

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.

score 0 · Answer 2 · answered May 30 '14 at 18:52

In your CSS you set the div display:none;, but in your JavaScript you are setting visibility.

Change this:

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';
}

To this:

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';
}

score 0 · Answer 3 · answered May 30 '14 at 19:06

There are several problems:

In your js you're setting the visibility property instead of display
Your calling a function getELementById (notice the big L?) which doesn't exist. It should be getElementById
Your img elements are missing the closing tag

I corrected all your mistakes and then it works. See:

http://jsfiddle.net/ZCF76/

(I also changed the src's links to get some visible results :))

My image is not becoming visible after commanding it with javascript?

3 Answers3