javascript - 如何使图像不可见,但在按下指定图像的按钮时显示?

标签 javascript html css visibility

我正在尝试创建一个 JavaScript 可见性函数,当我按下图像按钮时,它就会出现。但图像没有出现。我隐藏了图像,因为我只希望它们在按下按钮时显示。我该怎么做才能解决这个问题?

<html>
<head>
<style type="text/css">
#xbone {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
#ps4 {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
#wiiu {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
</style>
<script type="text/javascript">
function xbox()
    {
        document.getElementById("xbone").style.visibility="visible";
    }
    funtion sony()
     {
        document.getElementById("xps4").style.visibility="visible";
    }
    funtion nintentdo()
     {
        ddocument.getElementById("wiiu").style.visibility="visible";
    }
</script>
<img id="xbone" src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/06/19/XboxOne1.jpg" alt="Xbox One" width="800" height="600">
<img id="ps4" src="http://gamingbolt.com/wp-content/uploads/2013/06/ps4-hd-wallpapers.jpg" alt="Playstation 4" width="800" height="600">
<img id="wiiu" src="http://www.digitaltrends.com/wp-content/uploads/2012/09/Wii-U.jpg" alt="Wii U" width="800" height="600">
<input type="button" value="XBox One" onclick="xbox()">
    <input type="button" value="Playstation 4" onclick="sony()">
        <input type="button" value="WII U" onclick="nintendo()">
</head>
<body>

</body>
</html>

最佳答案

第一个真正的答案:

<div style = "visibility:hidden" id = "xbone"><img src = "xbone.jpg" /></div>
<button type = "button" 
onclick = "document.getElementById("xbone").style.visibility =
"visible"">Display XBONE</button>

但也要确保并修复语法错误。

关于javascript - 如何使图像不可见,但在按下指定图像的按钮时显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19461823/

相关文章:

html - 我的字段显示在第二行而不是第三行

javascript - 在 DIV 元素中加载 javascript 效果

javascript - append 元素上的绑定(bind)方法

javascript - 加载动画没有响应

javascript - 如何在离开页面之前警告用户而不是重定向

javascript - 在对等 AngularJS Controller 中重构一些重复代码以管理 $intervals 的想法

html - CSS DIV 不调整其高度

html - 标题内联元素的问题

javascript - 为什么jQuery或诸如getElementById之类的DOM方法找不到元素?

javascript - 第二次单击时 meteor 模板错误数据-*。这是一个错误吗?