El problema es que al agregar el código para mostrar el div: div.style.display = ''; este no muestra el div rojo. Lo he desactivado dejándolo solo para que se vea su posición en el código siguiente:
El problema es que al agregar el código para mostrar el div: div.style.display = '';
este no muestra el div rojo. Lo he desactivado dejándolo solo para que se vea su posición en el
código siguiente:
<title>Temporizador por bucle While</title>
<script>
function respuesta(a) {
var div = document.getElementById(a);
if(div.style.display == 'none') {
// div.style.display = ''; ←Esta es la línea que inicia el bug
document.getElementById('texto').value = "¿Es visible?";
}
if(div.style.display == '') {
let i = 140000000;
while (i) { i--; };
div.style.display = 'none';
document.getElementById('texto').value = "Tiempo!!";
}
}
</script>
function respuesta(a) {
var div = document.getElementById(a);
if (div.style.display == 'none') {
// div.style.display = ''; ←Esta es la línea que inicia el bug
document.getElementById('texto').value = "¿Es visible?";
}
if (div.style.display == '') {
let i = 140000000;
while (i) {
i--;
};
div.style.display = 'none';
document.getElementById('texto').value = "Tiempo!!";
}
}
<body>
<!-- Para visualizar el funcionamiento -->
<input type="text" id="texto" value="" />
<br />
<input type="button" value="Mostrar y ocultar R" onClick="javascript:respuesta('ocultoR');" />
<input type="button" value="Ocultar Green" onClick="javascript:respuesta('ocultoG');" />
<br /><br />
<!-- Mensajes tipo div -->
<!-- Rojo -->
<div id="ocultoR" style="display:none;
border-radius: 4px; width:auto;
margin:2px; padding:16px;
background-color:#fb4b4b; font-size: 16px;">
<span>Mensaje oculto</span>
</div>
<br />
<!-- Verde -->
<div id="ocultoG" style="display:'';
border-radius: 4px; width:auto;
margin:2px; padding:16px;
background-color:#50ff50; font-size: 16px;">
<span>Mensaje a ocultar</span>
</div>
</body>
Sumé una entrada de texto para ver los resultados:
<body>
<!-- Para visualizar el funcionamiento -->
<input type="text" id="texto" value=""/>
<br />
<input type="button" value="Mostrar y ocultar R"
onClick="javascript:respuesta('ocultoR');" />
<input type="button" value="Ocultar Green"
onClick="javascript:respuesta('ocultoG');" />
<br /><br />
<!-- Mensajes tipo div -->
<!-- Rojo -->
<div id="ocultoR" style="display:none;
border-radius: 4px; width:auto;
margin:2px; padding:16px;
background-color:#fb4b4b; font-size: 16px;">
<span>Mensaje oculto</span>
</div>
<br />
<!-- Verde -->
<div id="ocultoG" style="display:'';
border-radius: 4px; width:auto;
margin:2px; padding:16px;
background-color:#50ff50; font-size: 16px;">
<span>Mensaje a ocultar</span>
</div>
</body>
Sumé una entrada de texto para ver los resultados: