圖像不會隱藏之間進行切換並顯示

我使用的想法從 How to create a hidden <img> in JavaScript?

我有兩個之間不同的按鈕，使用HTML和其他使用JavaScript嘗試一個 - 如果我註釋掉一條線，燈泡的照片顯示

//document.getElementById("light").style.visibility = "hidden";

這行代碼是我爲「init」功能

如果我不評論線，燈一直「隱藏」，無論哪個按鈕我點擊

我沒有看到在Web控制檯登錄任何錯誤Safari瀏覽器

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

來源

2016-06-21 LaurelS

的visibility風格酒店的visible和hidden值。

沒有show值。

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

來源

2016-06-21 20:45:28 Quantastical

圖像不會隱藏之間進行切換並顯示

回答

相關問題