我的图像在使用javascript命令后不可见？_Javascript_Html_Popupwindow

我的图像在使用javascript命令后不可见？

javascript html

我的图像在使用javascript命令后不可见？,javascript,html,popupwindow,Javascript,Html,Popupwindow,我在几个不同的DIV中使用嵌入的css为html文件隐藏了图像，但我想使用Javascript显示一个指定的图像。例如，一个弹出窗口会询问用户他们想看哪张照片，并输入他们选择的内容，只有这张照片会弹出。因此，现在我已经隐藏了我的图像，它不想出现，甚至不想让它在我的javascript中可见。我做错了什么？？？顺便说一句，图像必须分配给DIV类。这是我的密码 <html> <head> <style> body{background-image:url(htt

我在几个不同的DIV中使用嵌入的css为html文件隐藏了图像，但我想使用Javascript显示一个指定的图像。例如，一个弹出窗口会询问用户他们想看哪张照片，并输入他们选择的内容，只有这张照片会弹出。因此，现在我已经隐藏了我的图像，它不想出现，甚至不想让它在我的javascript中可见。我做错了什么？？？顺便说一句，图像必须分配给DIV类。这是我的密码

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


正文{背景图像：url(http://www.desktopaper.com/wp-content/uploads/simple-stars-background-by-fantmayo-dibs.jpg)
}
h1{
页边距底部：0；
背景色：白色；
高度：40px；
宽度：200px；
}
p{
背景色：#200000；
颜色：白色；
高度：250px；
宽度：900px；
浮动：左；
}
#乌胡拉、苏鲁、斯科蒂{
位置：相对位置；
背景色：#6e6e；
高度：20px；
宽度：300px；
左边距：900px；
显示：无；
}  
头衔
文本
var选择；
做{
choice=window.prompt（“你想看到《星际迷航》中的哪些成员？输入S代表Scotty，输入U代表Uhura，输入L代表Sulu”）；
choice=choice.toUpperCase（）；
}while（choice！=“S”&&choice！=“U”&&choice！=“L”）；
var成员；
如果（选项=='S'）{
成员=“斯科蒂”；
document.getELementById（“Scotty”）.style.visibility='visible'；
}如果（选项==“U”）{
成员=“Uhura”；
document.getELementById（“Uhura”）.style.visibility='visible'；
}否则{
成员=“苏鲁”；
document.getELementById（“Sulu”）.style.visibility='visible'；
}

这是因为您使用的是两种不同的视觉显示样式

使用

display:none

隐藏图像，这是可以的（但这会阻止图像加载）。然后尝试以

可见性：可见的方式显示它们。内容仍然隐藏，因为您没有将显示样式更改为block

而不是使用可见性：可见
使用显示：块

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

另外，不知道它是否是复制粘贴的东西，但它是getElementById
而不是getELmentById


有关display
vsvisibility
的一些信息在CSS中设置divdisplay:none，但在JavaScript中设置可见性
更改此项：
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';
}

为此：
有几个问题：
在js中，您设置的是可见性属性，而不是显示
调用一个不存在的函数getELementById
（注意大L？）。它应该是getElementById

您的img
元素缺少结束标记
我纠正了你所有的错误，然后它就成功了。见：

（我还更改了src的链接以获得一些可见结果：）
您的CSS中有display:none
，但您在javascript中设置了visibility:visible。这是因为您将显示设置为none。。。而不是隐藏的可见性。style.display=“block”；而不是style.visibility=“hidden”；
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';
}