1

El siguiente botón no funciona la primera vez que es presionado, pero si a partir de la segunda- ¿Por qué pasa esto?

He simplificado el codigo para resolver este unico problema y poder implementarlo en una pagina web. Este es el codigo completo:

<!DOCTYPE html>
<html>
<body>

<p id="demo">uno</p>
<button onclick="change_text()">Click me</button>

<script>
    var val = document.getElementById("demo").value;

    function change_text(){
        if(val == "uno"){
            val = "dos";
        }
        else{
            val = "uno";
        }

        document.getElementById("demo").innerHTML = val;
    }
</script>

</body>
</html>

Este es el resultado:

El botón debe cambiar la palabra "uno" por "dos", pero no lo hace en el primer click

1
  • Estás usando innerHTML para poner el contenido pero value para recuperarlo. En ambas debería ser igual, es el innerHTML, no el value. Creería
    – Alfabravo
    el 27 jul. 2020 a las 22:58

2 respuestas 2

4

Como ya se ha señalado, el contenido que se encuentra por fuera de los elementos, como <p>uno</p> se recupera con innerHTML o, mejor aún con textContent, porque éste último es más seguro. Tu código no funciona al principio porque usas value para recuperar el dato, pero ese elemento no tiene nada en value.

Dado que al parecer empiezas con Javascript, veo en tu código algunas malas prácticas que me permito señalar, sugiriendo una práctica más recomendada.

  1. Antes de trabajar con el DOM verifica que esté todo cargado. Esto se hace escuchando el evento DOMContentLoaded. Si por algún motivo la página tarda en cargar e intentas referirte a algún elemento antes de que esté cargado el código fallará.
  2. Crea una referencia única a los elementos y luego usa esa referencia para obtener cualquier cosa de ese elemento. Así no usas cada vez document.elemento.propiedad, pues la llamada a document tiene un coste a nivel de rendimiento.
  3. Evita usar funciones in line como esto que hay en tu botón: onclick="change_text()" esto hace que el contenido HTML sea más dependiente del código Javascript, dificultando el rendimiento en aplicaciones grandes. Si mañana esa función debe recibir algún parámetro o algo, y la tienes en 2,400 archivos html tendrás que buscar esos 2,400 archivos para cambiar esa función in line que pusiste. Es mucho mejor usar escuchadores de eventos, identificando el botón por un id
  4. Puedes usar operadores ternarios para simplificar el código. Aquí cambiamos 6 líneas de código por una sola. Esta es la condición: (mText.textContent == "uno") esto equivaldría a preguntar si X es igual a Y. De ser verdadero, el elemento adquirirá el valor que hay inmediatamente después de ?, de lo contrario, adquirirá el valor que hay después de :.
  5. Para recuperar texto del DOM es más seguro y más rápido usar textContent que innerHTML (ver detalles aquí)

Visto esos 5 puntos, tu código podría optimizarse de este modo:

/* 1. Antes de trabajar con el DOM verifica que esté todo cargado*/
document.addEventListener("DOMContentLoaded", function(event) {

  /* 2. Referencia única a los elementos */
  var mButton = document.getElementById("btnDemo");
  var mText = document.getElementById("demo");
  /* 3. Escuchadores de eventos para evitar funciones in line */
  mButton.addEventListener('click', function() {
    /* 4. Operador ternario para evitar el if */
    /* 5. Por seguridad, se recomienda usar textContent cuando es posiblse*/
   mText.textContent = (mText.textContent == "uno") ?  "dos":  "uno";

  });
});
<p id="demo">uno</p>
<button id="btnDemo">Click me</button>

5
  • Efectivamente, estoy iniciando con JavaScript. Es mi primer dia de hecho. Vengo de python, y quise probar un poco como se implementaba el JavaScript en el codigo. Muchas gracias por los consejos!
    – Victor
    el 28 jul. 2020 a las 0:03
  • No me queda muy claro cómo funciona la ultima linea de codico. Sé que está sustiyuyendo a los if, pero ¿podrías explicarme que es lo que está escrito?
    – Victor
    el 28 jul. 2020 a las 0:09
  • @Victor Es una asignación mediante operador ternario. Aquí se pregunta si el elemento tiene escrita la palabra uno: (mText.textContent == "uno") ? si es verdadero se cumple lo que hay inmediatamente después de ?, o sea, esto: mText.textContent = "dos" (el textContent del elemento pasará a ser dos) de lo contrario se cumple lo que está a la derecha de los dos puntos : o esa esto: mText.textContent = "uno"
    – A. Cedano
    el 28 jul. 2020 a las 0:14
  • @Victor había puesto esa parte un poco confusa en el código, lo he simplificado, ahora lo entenderás mejor con el código modificado y lo ya explicado.
    – A. Cedano
    el 28 jul. 2020 a las 0:24
  • Ahora entiendo su funcionamiento. Me será de utilidad mas adeltante, al igual que los consejos dados. Muchas gracias y Bendiciones
    – Victor
    el 28 jul. 2020 a las 0:26
1

No tengo demasiada idea de JavaScript, pero creo que value no hace referencia al texto del párrafo, por eso en el primer click no muestra nada, ya que value = null. Si en lugar de evaluar value lo haces con innerHtml funciona.

 var val = document.getElementById("demo").innerHTML;
    
        function change_text(){
            if(val == "uno"){
                val = "dos";
            }
            else{
                val = "uno";
            }
    
            document.getElementById("demo").innerHTML = val;
        }
    <!DOCTYPE html>
    <html>
    <body>
    
    <p id="demo">uno</p>
    <button onclick="change_text()">Click me</button>
    
    </body>
    </html>

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.