1

tengo un simple archivo y un botón el cual me gustaría que cuando apriete cambie el texto y después de volver a tocar vuelva al anterior texto. Este es mi código html:

Lo que deseo, es cambiar el texto del botón. Que cuando la caja que dice "Master en JavaScript" se visualiza, el texto del botón sea "Cerrar". Y cuando no se visualice la caja, el texto del botón sea "Abrir"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Clase 102 </title>
    <style>

        button{
            width: 200px;
            height: 40px;
            font-size: 20px;
        }

        #caja{
            width: 300px;
            height: 50px;
            border: 5px dashed black;
            background: #ccc;
            text-align: center;
            line-height: 50px;
            color: black;
            font-size: 19px;
            font-family: Verdana;
            margin-top: 15px;
        }

    </style>
</head>
<body>
    <h1> Aprendiendo JQuery Master en JavaScript </h1>
    <button id="todoenuno">
        Cerrar
    </button>
    <div id="caja">
        Master en JavaScript 
    </div>


</body>
    <script type="text/javascript" src="JQuery.js"></script>
    <script type="text/javascript" src="js.js"></script>
</html>

Archivo de js:

$(document).ready(function(){
    $('#todoenuno').click(function(){  
        var that = $(this);

        that.html('Cerrar')

        $('#caja').toggle('fast');
    })
});

Intenté dos cosas, una con un If:

$('#todoenuno').click(function(){  
    var that = $(this);

    that.html('Cerrar')
    if( that.html() = 'Cerrar'){
        that.html('Abrir')
    }

    $('#caja').toggle('fast');
})

Y después lo otro, muy tonto, pero bueno:

that.html('Abrir');
that.html('Cerrar');

Se que mi consulta es tonta, pero gracias a quienes me ayuden con esta pequeña duda.

3
  • ¿Qué es lo que debe cambiar cuando presiones el botón?
    – user128299
    Commented el 7 ene. 2020 a las 0:11
  • El texto del botón <button id="todoenuno"> Abrir </button> Cuando se ve la caja, que diga 'Cerrar', y cuando no se ve la caja que diga 'Abrir'
    – FerAvila
    Commented el 7 ene. 2020 a las 0:12
  • Exactamente! Perdón, sí me permites la corrección. Es 'a ver' y no 'haber'. Perdón si te molesta que te corrijan.
    – FerAvila
    Commented el 7 ene. 2020 a las 0:31

2 respuestas 2

2

Lo que necesitas es tomar el evento click, tomar el contenido del botón para compararlo y después escribirlo.

$('#todoenuno').click(function(){//evento click
    var that = $(this);
    var texto = that.html();     //tomar el contenido

    if( texto  == 'Cerrar') {    //comparar el contenido
        that.html('Abrir');      //escribirlo
    }
    else {
        that.html('Cerrar');     //escribirlo
    }
});
3
  • Genial! Muchas gracias
    – FerAvila
    Commented el 7 ene. 2020 a las 0:29
  • no seria mejor usar la funcion togle de jquery? Commented el 7 ene. 2020 a las 0:36
  • Claro, le faltó agregar la función $('#caja').toggle('fast'); que va después del else. Pero, al menos yo, entendí.
    – FerAvila
    Commented el 7 ene. 2020 a las 0:52
1

Me parece que la tarea es simple y por tanto se puede resolver con JS puro de este modo:

<script>
    let boton = document.getElementById("todoenuno")

    boton.addEventListener("click", () => {
      (boton.innerText === "Cerrar") ? boton.innerText = "Abrir" : boton.innerText = "Cerrar"
    })
</script>
  • Obtengo al elemento button y lo asigno a una variable
  • Le agrego un listener al evento click del botón
  • Leo la propiedad innerText y si su valor es Cerrar entonces lo cambio y le asigno Abrir y si no hago lo contrario

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.