Insertar un largo código HTML en JavaScript, pero el evento onclick no funciona.
Estoy utilizando el atributo innerHTML para insertar un largo código html en javascript.
Aquí tienes un ejemplo similar al mío:
let result = document.getElementById(‘result’);
function display(){
result.innerHTML += ‘ ‘;
function searchdata(){
console.log(‘Funciona’);
}
}
El problema ocurre cuando hago clic en el botón de búsqueda, muestra el error Uncaught ReferenceError: searchdata is not defined.
Sé que si declaro la función antes de usar la declaración innerHTML, esto funcionará completamente.
Sin embargo, me pregunto por qué ocurre esto.
Además, ¿alguien podría proporcionarme una mejor manera de insertar html en javascript? porque quiero insertar un formulario completo en javascript (que es mucho más de lo que muestro en el ejemplo), y usar innerHTML hace que sea difícil cambiar y encontrar errores después.
¡Gracias por cualquier respuesta!
Actualizado: Sé cómo solucionar el problema, pero solo busco la razón y una forma más avanzada de insertar html en javascript
davy.ai
Usando innerHTML para insertar código HTML en JavaScript
Problema
Al usar innerHTML para insertar un largo código HTML en JavaScript, es posible encontrarse con un mensaje de error “Uncaught ReferenceError: [nombre de la función] no está definida” al invocar una función declarada después de la instrucción innerHTML.
Este problema se puede solucionar declarando la función antes de la instrucción innerHTML.
Razón
La razón de este problema es que la instrucción innerHTML reemplaza el contenido del elemento HTML con el nuevo código, incluyendo cualquier escucha de eventos o declaraciones de funciones existentes. Por lo tanto, si se declara una función después de la instrucción innerHTML, no será reconocida por el elemento HTML, lo que resultará en un mensaje de error.
Solución
Una solución es declarar la función antes de la instrucción innerHTML.
Otra solución es utilizar la delegación de eventos para adjuntar el escucha de eventos a un elemento padre que no está siendo reemplazado por la instrucción innerHTML. De esta manera, el escucha de eventos seguirá siendo reconocido incluso si el elemento HTML en sí es reemplazado.
Forma alternativa de insertar HTML en JavaScript
Una forma mejor de insertar HTML en JavaScript es utilizar un motor de plantillas, como Handlebars o Mustache. Estos motores te permiten definir plantillas con marcadores de posición para contenido dinámico, que se pueden compilar y utilizar para generar el código HTML final en tiempo de ejecución.
El uso de un motor de plantillas facilita la gestión y modificación de código HTML complejo, además de mejorar el rendimiento de la aplicación al reducir la cantidad de código que necesita ser generado e insertado en tiempo de ejecución.