Javascript 图像不会在隐藏和显示之间切换
我无法使图像在“隐藏”和“显示”之间来回切换。 我使用的是来自 我有两个不同的按钮,一个使用html,另一个使用javascript——如果我注释掉一行,就会显示灯泡照片 这行代码在我的'init'函数中 如果我不注释该行,则无论单击哪个按钮,灯光都将保持“隐藏” 我在Safari的Web控制台日志中没有看到任何错误Javascript 图像不会在隐藏和显示之间切换,javascript,html,image,show,hidden,Javascript,Html,Image,Show,Hidden,我无法使图像在“隐藏”和“显示”之间来回切换。 我使用的是来自 我有两个不同的按钮,一个使用html,另一个使用javascript——如果我注释掉一行,就会显示灯泡照片 这行代码在我的'init'函数中 如果我不注释该行,则无论单击哪个按钮,灯光都将保持“隐藏” 我在Safari的Web控制台日志中没有看到任何错误 开灯 开灯 //document.images['light'].style.visibility=隐藏; 函数init(){ //document.getElementByI
开灯
开灯
//document.images['light'].style.visibility=隐藏;
函数init(){
//document.getElementById(“light”).style.visibility=“hidden”;
var onButton=document.getElementById(“onButton”);
onButton.onclick=函数(){
人口可见度();
}
}
函数demoVisibility(){
document.getElementById(“light”).style.visibility=“show”;
}
document.addEventListener('readystatechange',function(){
//这似乎是一个很好的做法-防止我得到我得到的类型错误
// https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
如果(document.readyState==“完成”){
init();
}
});
样式属性的值为可见
和隐藏
没有show
值
//document.getElementById("light").style.visibility = "hidden";
<!DOCTYPE html>
<html>
<body>
<h1>Switch on the Light</h1>
<img id="light" src="WebVuCoolOldBulb-2.jpg" style="width:100px" >
<button type = button
onclick="document.getElementById('light').src.show ='WebVuCoolOldBulb-2.jpg'" >Switch On the Light
</button>
<input type="button" id="onButton" value="ON" />
</body>
<script>
//document.images['light'].style.visibility = hidden;
function init() {
//document.getElementById("light").style.visibility = "hidden";
var onButton = document.getElementById("onButton");
onButton.onclick = function() {
demoVisibility() ;
}
}
function demoVisibility() {
document.getElementById("light").style.visibility = "show";
}
document.addEventListener('readystatechange', function() {
// Seems like a GOOD PRACTICE - keeps me from getting type error I was getting
// https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
if (document.readyState === "complete") {
init();
}
});
</script>
</html>
function init() {
document.getElementById("light").style.visibility = "hidden";
var onButton = document.getElementById("onButton");
onButton.onclick = function() {
demoVisibility();
}
}
function demoVisibility() {
document.getElementById("light").style.visibility = "visible";
}