Hola a todos,
Necesito mostrar y ocultar capas dependiendo del valor de un input.
El valor del input "nbAdultos" lo cambio con otra funcion JavaScript (por eso está como readOnly) y ahí no tengo problema.
La idea es que haga lo siguiente:
Inicialmente la capa 1 está visible y el valor por defecto del input es "1" y todas las demás capas estan en "hidden", la idea es que se muestre la cantidad de capas dependiendo del valor del input siguiendo esta lógica:
si es "1" -> muestra NomAdul1, las demás ocultas.
si es "2" -> muestra NomAdul1 y NomAdul2, el resto ocultas.
si es "3" -> muestra NomAdul1, NomAdul2 y NomAdul3, el resto ocultas.
si es "4" -> muestra todas.
He intentado hacer esto, el navegador no me da error pero no hace nada.
¿que estoy haciendo mal????
Gracias de antemano por la ayuda
Saludos
AQUI VA LOS CODIGOS:
Código:
function showNames(){
var Adultos;
var numAdult = document.this;
Adultos = numAdult.value;
if (Adultos == 1) {
document.capa1.style.visibility = "visible";
}
if (Adultos == 2) {
document.NomAdul1.style.visibility = "visible";
document.NomAdul2.style.visibility = "visible";
}
if (Adultos == 3) {
document.NomAdul1.style.visibility = "visible";
document.NomAdul2.style.visibility = "visible";
document.NomAdul3.style.visibility = "visible";
}
if (Adultos == 4) {
document.NomAdul1.style.visibility = "visible";
document.NomAdul2.style.visibility = "visible";
document.NomAdul3.style.visibility = "visible";
document.NomAdul4.style.visibility = "visible";
}
}
Código HTML:
<input id="nbAdultos" readonly="readOnly" size="1" value="1" name="nbAdultos" onchange="showNames();" />
<div id="NomAdul1" style="visibility:visible;">Nombre 1</div>
<div id="NomAdul2" style="visibility:hidden;">Nombre 2</div>
<div id="NomAdul3" style="visibility:hidden;">Nombre 3</div>
<div id="NomAdul4" style="visibility:hidden;">Nombre 4</div>