0
759
VistasCómo llamar a una función declarada en un módulo javascript (tipo = módulo) desde una página html
Estoy luchando para usar módulos de javascript ...
Tengo un archivo html y un módulo JS. Tengo una función definida en el archivo javascript y me gustaría llamar a esa función desde mi página HTML. este es mi codigo
índice.html
<html> <head> <script type="module" src="app.js"></script> </head> <body> <button onclick="greetFromHtml();">greetFromHtml</button> <button onclick="greetFromModule()"> greetFromModule</button> <script type="text/javascript"> function greetFromHtml(){ alert('Hello'); } </script> </body> </html>aplicación.js
function greet(){ alert('Hello'); } El botón greetingFromHtml funciona bien. Cuando hago clic en el botón greetingFromModule aparece este error: hello is not defined at HTMLButtonElement.onclick
Si elimino type="module" del encabezado, todo funciona bien, sin embargo, necesito usar módulos por otras razones, por lo que esta no es una buena solución aquí.
He visto varias publicaciones que dicen que necesito importar/exportar o usar la ventana, pero no estoy seguro de qué hacer. ¿Alguien puede dar una respuesta por favor? Idealmente, la forma más sencilla de lograrlo.
Vea a continuación la referencia a alguna pregunta que he revisado:
la función en mi módulo javascript no está definida
Llamar a funciones en un JavaScript desde un HTML
Cómo usar el código del script con type=module [duplicado]
Módulos ES6: función onclick indefinida después de la importación
EDITAR He intentado lo siguiente pero sigo recibiendo el mismo error 
EDITAR 2 El código en la respuesta está funcionando. Solo estaba tratando de ejecutarlo localmente, pero entendí que necesita un servidor, por lo que si ve el mismo error, cargue el sitio en el servidor o use un servidor local.
1 Respuestas
Responde la pregunta0
En primer lugar, debe exportar explícitamente su función:
export function greet() { alert("Hello from module"); }En segundo lugar, un módulo tiene su propio alcance (este es el punto central de los módulos), por lo que debe agregar la función al alcance global. Entonces, para hacerlo, debe ejecutar un script que importe la función y la agregue al objeto de la ventana:
<script type="module"> import { greet } from "./app.js"; window.greetFromModule = greet; </script> Ahora no necesita esta parte <script type="module" src="app.js"></script>
Alternativamente, puede crear un obj vacío y agregarle sus módulos, así es como se vería:
<html> <head></head> <body> <button onclick="greetFromHtml();">greetFromHtml</button> <button onclick="module.greet()">greetFromModule</button> <script type="text/javascript"> function greetFromHtml() { alert("Hello"); } const module = {}; </script> <script type="module"> import { greet } from "./app.js"; module.greet = greet; </script> </body> </html>