1

Muy buenas familia,

Pues lo que estoy buscando, simplemente, es que al hacer click en un boton desaparezca un elemento y, que al hacer click en el mismo boton, aparezca el texto

Ya de paso, como sé que sois tan generosos ( :D ), si podéis decirme si es posible declarar el condicional con el evento dentro, tal como lo hago abajo:

<p id="parrafo">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
     Voluptatem ut non sint excepturi molestias perspiciatis
      doloremque, provident ducimus est quo, dolorum at rerum!
       Hic accusamus mollitia unde, quisquam ratione repellendus!</p>
<button type="button" id="boton">boton</button>
<script>
    var parr = document.getElementById("parrafo")
    parr.style = "block";

    function ocultar(){
        parr.style.display = "none";
    }
    function mostrar(){
        parr.style.display = "block";
    }

    if(parr.style == "block"){
        boton.onclick = ocultar;
    }else{
        boton.onclick = mostrar;
    }

</script>

Muchísimas gracias!!!

3 respuestas 3

2

Si queremos cambiar estilos no necesariamente contrarios pero si mutuamente excluyentes, resulta bastante práctico usar classList.toggle(), en donde una clase determinada si existe la elimina y si no, la añade, en este caso la clase ocultaría el elemento, y la ausencia de la clase lo muestra, pero podría ser al revés.

const parrafo = document.getElementById("parrafo");
const boton = document.getElementById("boton").addEventListener("click", () => {
  parrafo.classList.toggle("oculta")
});
.oculta {
  display: none;
}
<p id="parrafo">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  Voluptatem ut non sint excepturi molestias perspiciatis
  doloremque, provident ducimus est quo, dolorum at rerum!
  Hic accusamus mollitia unde, quisquam ratione repellendus!</p>
<button type="button" id="boton">boton</button>

1
  • Gracias Emmeus, También genial la solución que me planteas. Voy a estudiar al detalle "classList.toggle()" Me gustaría seleccionar las dos respuestas como buenas, pero por lo que veo, no se puede... Commented el 14 oct. 2019 a las 1:09
1

Estabas cerca de la respuesta Alvaro lo unico que hice fue ponerle el display: block; por default a la etiqueta de tu parrafo y luego cree una nueva funcion que controla el estado del display con un ternario.. en caso que sea block llama tu funcion ocultar() en caso que sea none la funcion mostrar().. El condicional no lo debes utilizar asi.. porque lo que hace es ejecutarse una vez y luego no funciona nuevamente.. por eso haces una funcion metes la condicion y cuando la necesites llamas la funcion.. este es el codigo saludos..

<p id="parrafo" style='display:block'>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Voluptatem ut non sint excepturi molestias perspiciatis
        doloremque, provident ducimus est quo, dolorum at rerum!
        Hic accusamus mollitia unde, quisquam ratione repellendus!</p>
    <button type="button" id="boton" onclick='mostrarOcultar()'>boton</button>
    <script>
        var parr = document.getElementById("parrafo")

        function ocultar() {
            parr.style.display = 'none';
        }
        function mostrar() {
            parr.style.display = "block";
        }

        function mostrarOcultar() {
            parr.style.display == 'block' ? ocultar() : mostrar()
        }
    </script>

2
  • Muchas gracias @Israel Gonzalez Muy clara tu explicación :D Commented el 14 oct. 2019 a las 1:05
  • de nada @ÁlvaroGarcía ;)
    – RazerJs
    Commented el 14 oct. 2019 a las 7:16
1

mira esta seria mi forma de resolver lo que necesitas, no hay nada complejo solo es jugar con una variable booleana y los condicionales dentro de la función, espero te sirva el codigo. Saludos!!

<p id="texto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, corporis quaerat    quo. Nesciunt nam provident officiis ab nostrum itaque. Reiciendis minus animi voluptatem, dolore dolorem neque ex harum numquam, a!
</p>

<input type="button" onclick="mostrarOcultar()" value ="Ocultar" id="boton">

<script>
var estado = true;
var txt = document.getElementById("texto");
var btn = document.getElementById("boton");

function mostrarOcultar(){	

 if(estado == true){
   txt.style.display = "none";
   btn.value = "Mostrar"
   estado = false;
 }
 else if(estado == false){
   txt.style.display = "block";
   btn.value = "Ocultar";
   estado = true;
 }
 
}
</script>

1
  • Gracias Axl! :D Commented el 14 oct. 2019 a las 1:09

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.