La imagen no cambiará entre oculta y mostrar
No puedo obtener una imagen paraalternar entre 'oculto' y 'mostrar'
Estoy usando ideas de¿Cómo crear un <img> oculto en JavaScript?
Tengo dos botones diferentes, probando uno con html y el otro con javascript. Si comento una línea, se muestra la foto de la bombilla
//document.getElementById("light").style.visibility = "hidden";
Esa línea de código está en mifunción 'init'
Si no comento la línea, la luz permanece 'oculta', sin importar en qué botones haga clic
No veo ningún error en el inicio de sesión de la consola web en 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>