0

Tengo un achivo functions.js que tiene esta única función

export const setLang = (lang) => {
    let path = '';
    if(lang == 'es'){
        path = window.location.pathname.replace('/en/', '/');
    }else if(lang == 'en'){
        path = window.location.pathname.replace('/xxx/', '/xxx/en/')
    }
    window.location.replace(window.location.origin+path)
}

Luego desde un archivo header.php agrego la línea

<script src="/js/functions.js" type="text/javascript"></script>

(estoy bastante seguro que la ruta está bien, header.php y la carpeta js están al mismo nivel, probé de la manera que ya indiqué, y js/functions.js y ./js/functions.js

Cabe aclarar que header.php es un html <header></header> que se llama desde distintos lugares del sitio con la funcion include de php. Probé poner el script al principio, al medio, o al final.

Lo que yo espero es que al clickear en un span se ejecute la funcion setLang

<span class="custom-option" onclick="setLang('en')" data-value="en">EN</span>

Pero la consola me arroja

index.php:411 Uncaught ReferenceError: setLang is not defined at HTMLSpanElement.onclick

No sé si el error está en la forma de exportar del javascript, o la importacion desde PHP. Cualquier ayuda es bienvenida.

2
  • ¿Probaste quitando la palabra export? De acuerdo a la documentación se usa solo en módulos y, además, deberías importarlo antes de poder usarlo.
    – Triby
    Commented el 11 feb. 2022 a las 19:19
  • Revisaste la consola del navegador?... lo mas probable es que esté saltando algún error cuando intentas incluir el script
    – Pipe
    Commented el 11 feb. 2022 a las 20:58

1 respuesta 1

0

Ok, 3 cosas

numero 1:

Para poder usar la sentencia export, el script debe estar declarado como tipo module.

<script src="/js/functions.js" type="module"></script>

numero 2:

Al declarar un script como tipo module para poder que funcione el modulo deberas ejecutar la pagina en un servidor, protocolos como file:// DEJAN DE SER VALIDOS, en tu caso no tendras problemas, porque si estas usando PHP debes estar corriendo tu codigo en un servidor, apache por ej.

numero 3:

Si vas a usar modulos para poder usar tu función exportada primero deberas importarla con un import.

En tu caso no estas necesitando usarla en otro script si no en la misma pagina, por lo que realmente no necesitaras una sentencia import, sin embargo, justo por esto ultimo (no necesitas importar esa función en otro archivo), no tiene sentido declarar el script como tipo modulo.

Tiene mucho menos sentido exportarlo.

conclusión:

Para tu caso, al no tener que hacer uso de esa función en un script aparte si no en la misma pagina es mejor simplemente que no uses la sentencia export.

Por lo tanto tambien te recomendaria no usar el type = module para tu caso, ya que realmente no lo necesitas.

Entonces en este caso, la verdad seria mejor no aplicar los modulos, pues lo que tu necesitas no es usar eso en otro script, si no en la misma pagina.

Por lo tanto tu codigo queda de esta manera:

functions.js:

const setLang = (lang) => {
    let path = '';
    if(lang == 'es'){
        path = window.location.pathname.replace('/en/', '/');
    }else if(lang == 'en'){
        path = window.location.pathname.replace('/xxx/', '/xxx/en/')
    }
    window.location.replace(window.location.origin+path)
}

Ahora bien, para que te reconozca la funcion, tienes que tener en cuenta que como estas tratando de usar la funcion en html en linea:

<span class="custom-option" onclick="setLang('en')" data-value="en">EN</span>

El script debera a fuerzas ser declarado ANTES de los elementos donde uses estas funciones.

por ejemplo antes del cierre del head:

<head>
...
...
<script src="/js/functions.js" type="text/javascript"></script>
</head>

<body>
</body>

Y si bien esto funcionaria, no seria exactamente lo mejor, normalmente seria mas viable nunca usar html en linea y comenzar a usar algo llamado encapsulamiento, pero esto ya es tema de otro costal.

Por lo que dejo este ultimo concepto para otra pregunta.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.