Estoy aprendiendo a integrar Javascript en HTML y tuve una idea para un código extraño. No puedo decir con certeza si hay algo malo en ello.
Mi objetivo era crear un contador que se muestra en la página que comienza en 1 y aumenta cada vez que se llama a una función.
Mi código original era algo como esto:
<p id="counter"></p> <script> var turn = 1, turn_counter = document.getElementById('counter'); turn_counter.innerHTML = turn; function increase() { turn++ turn_counter.innerHTML = turn; } </script> La variable turn registraría un número y turn_counter la etiqueta <p> . Luego, el contenido de esta etiqueta se configuró para turn . Cuando se llamó a la función de increase() , aumentaría el turn y luego ajustaría la etiqueta para que coincida.
Sin embargo, me di cuenta de que había una posible solución más simple:
<p id="counter">1</p> <script> var turn_counter = document.getElementById('counter'); function increase() { turn_counter.innerHTML++ } </script> Esto escribe "1" dentro de la etiqueta <p> y luego establece la variable turn_counter en esa etiqueta. Luego, cada vez que se llama a la función de increase() , simplemente aumenta el número dentro de la etiqueta.
Si bien ambas soluciones funcionan, creo que debe haber algún problema con el uso de la segunda. Algo acerca de almacenar una variable dentro de una etiqueta HTML no se siente bien. Entonces, ¿hay algún problema con la segunda solución?
(Además, si hay mejores formas de hacer esto, estaría abierto a ellas. Todavía soy muy nuevo en esto).
Mientras que con la primera solución, en realidad está almacenando una variable en Javascript, en el segundo ejemplo está haciendo uso de las "peculiaridades" de Javascript, pero probablemente no sea lo que quería.
Cuando lee el HTML interno del contador div, Javascript encuentra un número de cadena, como "1", pero dado que "1" es superficialmente igual a 1, Javascript intenta aplicarle matemáticas y hace lo que le pidió.
¿Está funcionando? Sí. ¿Es malo? También si.
Pero ¿por qué está funcionando? Está funcionando debido a la coerción de tipos de Javascript y la conversión de tipos basada en eso.
¿Porque es malo? No es malo debido a la coerción de tipos, no es bueno por el hecho de que está guardando el estado de su aplicación en la capa de la interfaz de usuario, lo cual es factible pero no es una buena operación.
No está almacenando una variable en este caso, solo está haciendo uso de comportamientos extraños de Javascript. Potencialmente, podría analizar el HTML interno para convertirlo en un número, pero aún está lejos de ser una solución, ya que no guardaría correctamente el "estado" para su aplicación de JavaScript, ¡que es donde reside la lógica!
Podría ver HTML como la capa de la interfaz de usuario (sin estilo), pero desea mantener la lógica (como la declaración y el uso de variables) dentro de Javascript.
Como propone @GrafiCode en los comentarios, podrías
const whatAmI_1 = div.innerHTML + 1 const whatAmI_2 = div.innerHTML++ typeof whatAmI_1 // string, 11 typeof whatAmI_2 // number, 2Esto se debe a que el operador de incremento (++) analiza la cadena, la convierte en un número y aplica el incremento necesario mientras que el + 1 se ve como una concatenación de cadenas a medida que el segundo valor (+1) se analiza y convierte en cadena por JavaScript.
@Wiktor Zychla señaló que tal vez la palabra "peculiaridades" no es lo suficientemente explicativa sobre las elecciones realizadas por Javascript. La coerción de tipos no es algo malo o incorrecto, es parte de Javascript y si sabes qué es y cómo usarlo, puedes hacer muchas cosas.