Tengo una estructura de archivos simple con archivos HTML y JS que se ve así:
templates/ - index.html - menuselector.jsAquí hay un ejemplo de función que quiero importar a HTML:
export function getTypeOfClient() { const select = document.getElementById('inputGroupSelect02'); const value = select.options[select.selectedIndex].value; if (value === '1') { document.getElementById('person').style.display = "block"; document.getElementById('company').style.display = "none"; } else if (value === '2') { document.getElementById('company').style.display = "block" document.getElementById('person').style.display = "none"; } else { document.getElementById('person').style.display = "none"; document.getElementById('company').style.display = "none"; } }Aquí hay un ejemplo de código HTML que usa esta función:
<select class="form-select" id="inputGroupSelect03" onchange="getTypeOfClient()"> <option value="0" selected>Choose...</option> <option value="1">Person</option> <option value="2">Company</option> </select> Cuando escribo mi código en la etiqueta del script , todo funciona correctamente, pero decidí exportar este código a un archivo JS para hacerlo más limpio.
Importo esto en un archivo como este - <script type="text/javascript" src="menuselector.js"></script>
Y aquí esta el problema. Cada vez que en la consola obtengo 404 y no encuentro este archivo. Estaba tratando de importar esto en el encabezado, pie de página, cuerpo, etc., pero no funciona. ¿Qué hago mal?
No puede usar módulos ES como detectores de eventos en línea onchange="getTypeOfClient()" ya que no se agregan al alcance global (que es el punto central de los módulos).
Asígnelo explícitamente al alcance global usando window.getTypeOfClient = getTypeOfClient , o elimine la palabra clave export si no desea módulos ES.
Dicho esto, usar detectores de eventos en línea es muy malo por muchas razones; en su lugar, use Javascript para definir o agregar el oyente.