CONSULTA 1
Estoy intentando que se oculte un elemento en función a si un input radio está seleccionado o no. Sí: oculta // No: muestra.
Estoy intentando utilizar el evento click pero no me funciona. Os pego el código.
window.onload=function(){
document.getElementById("cap_cambio_fase_si").addEventListener("click", ocultarElemento);
document.getElementById("cap_cambio_fase_no").addEventListener("click", mostrarElemento);
}
function ocultarElemento(){
document.getElementById("texto").style.display="none";
}
function mostrarElemento(){
document.getElementById("texto").style.display="inline-block";
}
<div id="cap_contenedor_cambio_fase">
<p>Cambio de Fase:</p>
<input type="radio" title="Si" value="si" name="cap_cambio_fase" id="cap_cambio_fase_si" checked="checked">
<label for="cap_cambio_fase_si">Si</label>
<input type="radio" title="no" value="no" name="cap_cambio_fase" id="cap_cambio_fase_no">
<label for="cap_cambio_fase_no">No</label>
</div>
<p id="texto" class="visible">Este texto se está mostrando porque estás seleccionando: Si</p>
CONSULTA 2
Además me gustaría saber cómo podría hacer para que el script valorase qué elemento de la página está checked y en el caso de que SÍ estuviera seleccionado el texto estuviese oculto. Si el checked está en el NO, que el texto se muestre. (el sí está checked al cargar la página).
Espero vuestras respuestas,
gracias.
EDITO: CONSULTA 3
En este caso el script me lo hace correctamente aunque no introduzca las funciones dentro del window.onload:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>EventListener</title>
<link rel="stylesheet" href="estilos.css">
<script src="miscript.js"></script>
</head>
<body>
<button id="mas" class="visible">+</button>
<button id="menos" class="oculto">-</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi porro reiciendis placeat corporis quas, mollitia voluptate aliquam quidem accusamus, distinctio? Dignissimos eveniet voluptates nam iste voluptatem nisi quisquam expedita alias.</p>
<p id="textoAdicional" class="oculto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore animi expedita neque voluptates facere iste blanditiis obcaecati, deserunt vitae, odio nemo dolore delectus hic eius. Quod voluptatem, sunt explicabo distinctio.</p>
</body>
</html>
SCRIPT:
window.onload=function(){
document.getElementById("mas").addEventListener("click",mostrar);
document.getElementById("menos").addEventListener("click",ocultar);
}
function mostrar(){
/*muestro el texto adicional*/
document.getElementById("textoAdicional").className="visible";
/*oculto el botón más*/
document.getElementById("mas").className="oculto";
/*muestro el botón menos*/
document.getElementById("menos").className="visible";
}
function ocultar(){
/*oculto el texto adicional*/
document.getElementById("textoAdicional").className="oculto";
/*muestro el botón más*/
document.getElementById("mas").className="visivle";
/*oculto el botón menos*/
document.getElementById("menos").className="oculto";
}
document.getElementById("cap_cambio_fase_no").addEventListener("click", ocultarElemento); document.getElementById("cap_cambio_fase_si").addEventListener("click", mostrarElemento);
Incluso esto se podría hacer con un solo elemento del tipocheckbox
, no sé por qué quieres usar dosradio
¿? ... Para responder a la segunda consulta: no entiendo lo que preguntas.