1

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";
}
2
  • if(document.getElementById("tu_radio_id").checked == true){ code }
    – Tygreton
    Commented el 21 feb. 2019 a las 10:11
  • Para responder a tu primera consulta: tienes los listener asignados al revés, por eso no te funciona, prueba así: 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 tipo checkbox, no sé por qué quieres usar dos radio ¿? ... Para responder a la segunda consulta: no entiendo lo que preguntas.
    – A. Cedano
    Commented el 21 feb. 2019 a las 10:21

1 respuesta 1

2

La primera parte de la pregunta haría que la votase para cerrar por "error tipográfico": has puesto los event listeners al revés:

window.onload=function(){
    
  document.getElementById("cap_cambio_fase_si").addEventListener("click", mostrarElemento );
  document.getElementById("cap_cambio_fase_no").addEventListener("click",  ocultarElemento);
}

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>

Para la segunda cuestión, puedes comprobar el estado 'checked':

window.onload=function(){
  const checkbox=document.getElementById("cap_cambio_fase_si");
  checkbox.addEventListener("click", mostrarElemento );
  function mostrarElemento(){
    if (checkbox.checked) {
      document.getElementById("texto").style.display="inline-block";
    } else {
      document.getElementById("texto").style.display="none";
    }
  }
}
<div id="cap_contenedor_cambio_fase">
  <p>Cambio de Fase:</p>
  <input type="checkbox" title="Si" value="si" name="cap_cambio_fase" id="cap_cambio_fase_si" checked="checked">
  <label for="cap_cambio_fase_si">Mostrar</label>
</div>
<p id="texto" class="visible">Este texto se está mostrando porque estás seleccionando: Si</p>

6
  • No sé realmente si la primera parte sería un error tipográfico pues, a pesar de que en el texto del código dice que se muestra por estar seleccionado "sí", en el resto de la pregunta dice que el texto debe ocultarse cuando "sí" esté seleccionado y mostrarse cuando se seleccione "no". Técnicamente el código funciona como explica que debe hacerlo
    – Rabegi
    Commented el 21 feb. 2019 a las 10:43
  • @Rabegi Puesto que el OP decía que no funcionaba, asumí que el comportamiento esperado era el opuesto Commented el 21 feb. 2019 a las 11:36
  • @PabloLozano, escribí una respuesta con una duda sobre el código de la segunda cuestión. Gracias por la aportación^^
    – fjalcaraz
    Commented el 21 feb. 2019 a las 11:55
  • @FjCode No es una buena idea: seguramente te voten negativo porque una respuesta no debe ser una pregunta y acabe borrada. En cualquier caso la respuesta es: El navegador ejecuta el código cuando lo encuentra. Y en tu página el JS está antes de la declaración de los elementos, por lo que el body está vacío. El evento onload hace que el código se ejecute cuando la página ha terminado de cargar Commented el 21 feb. 2019 a las 12:01
  • @PabloLozano Acabo de etitar la pregunta (Añadi una tercera cuestión). Puse un script, el cual tiene las funciones fuera del window.onload y me ejecuta el script correctamente. Al contrario que en el anterior caso que posteaste, en el que si saco las funciones del script no funcionan. No termino de entender la lógica de cuándo es necesario poner un window.onload en todo el script y cuando no.
    – fjalcaraz
    Commented el 21 feb. 2019 a las 14:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.