Estoy usando innerHTML para insertar código html largo en javascript .
Aquí hay un ejemplo similar a mi ejemplo:
let result = document.getElementById('result') function display(){ result.innerHTML += '<input id="searchterm" type="text" /> <input id="search" type="button" value="Search" onclick="searchdata()"></input>' function searchdata(){ console.log('it works') } } <button onclick='display()'>Display</button> <div id=result></div>search button , se mostrará Uncaught ReferenceError: searchdata is not defined . Sé que si declaro la function antes de hacer la declaración innerHTML , esto funcionará absolutamente.
Sin embargo, me pregunto ¿por qué sucede esto?
Además, ¿podría alguien proporcionarme una mejor manera de insertar html en javascript porque quiero insertar un form completo en javascript (que es mucho más de lo que muestro en el ejemplo) y al usar innerHTML , es bastante difícil cambiar y encontrar errores ¿luego?
¡Gracias por cualquier respuesta!
Actualizado: sé cómo solucionar el problema, pero solo busco el motivo y una forma avanzada de insertar html en javascript
Intente mover la función "searchdata()" fuera del alcance local y llámela dentro de la función "display()". A ver si funciona así.
let result = document.getElementById('result') function searchdata() { console.log('it works') } function display() { result.innerHTML += '<input id="searchterm" type="text" /> <input id="search" type="button" value="Search" onclick="searchdata()"></input>' searchdata(); }