4 votes

Impossible d'accéder à une variable globale en javascript ?

J'essaie d'accéder à une variable d'un fichier à partir d'un autre fichier. Voici ce que j'ai :

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>

  <body>
    <button id="btn">Global</button>
    <script src="/test.js"></script>
    <script src="/testpass.js"></script>
  </body>
</html>

test.js :

export var globalVariable = {
    output: "test this"
 };

testpass.js :

import { globalVariable } from './test.js'
document.getElementById("btn").addEventListener("click", function(){
  alert(globalVariable.output);
});

Rien ne se passe. J'ai également essayé de faire

var globalVariable = {
    output: "test this"
 };

puis en y accédant simplement à partir d'un autre fichier, comme le montre cette réponse : Appeler des variables d'un fichier javascript à un autre mais cela n'a pas fonctionné. J'ai essayé de l'exporter comme indiqué dans cette réponse : Puis-je accéder aux variables d'un autre fichier ? également, mais sans succès. J'utilise sublime text et vue.js et cela ne fonctionne pas pour les deux.

De plus, si je fais quelque chose comme ça :

import { globalVariable } from '.test.js'
document.getElementById("btn").addEventListener("click", function(){
  alert("Not printing the globalVariable here");
});

le fichier javascript entier semble échouer et ne fonctionne pas du tout lorsqu'il est appelé dans le fichier HTML.

7voto

T.J. Crowder Points 285826

Vous devriez obtenir une erreur du moteur JavaScript du navigateur dans la console Web. Pour utiliser import y export vous devez traiter votre code comme un module . Votre script ne le font pas, ils traitent le code comme une simple script . Pour traiter testpass.js en tant que module, vous devez utiliser type="module" :

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

Pas besoin d'énumérer test.js , testpass.js le chargera. Donc :

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <button id="btn">Global</button>
    <script src="/testpass.js" type="module"></script>
  </body>
</html>

Malheureusement, nous ne pouvons pas afficher les modules dans les Stack Snippets de SO, mais si vous effectuez ces modifications, cet exemple de codesandbox est ce que vous obtenez (sauf que j'ai modifié src="/testpass.js" à src="./testpass.js" ).


Notez que globalVariable n'est pas une variable globale (ce qui est une bonne chose™). C'est une variable locale dans test.js qu'elle exporte. Tout autre module peut l'importer, mais ce n'est pas un module global.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X