Appeler une fonction JavaScript dans un autre fichier JS

Je voulais appeler une fonction définie dans script1.js dans un autre fichier script2.js. Les deux fichiers sont définis dans un fichier HTML comme :

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

Je veux appeler myfun() défini dans script1.js dans script2.js. D’après mes recherches, si script1.js est défini en premier, c’est possible, mais d’après mes tests, je n’ai trouvé aucun moyen de le faire.

Voici mon code :

Fichier: script2.js

document.getElementById("btn").onclick = function() {
    myfun();
}

Fichier: script1.js

function myfun() {
    alert("Hello World!");
}

Une fonction ne peut être appelée que si elle a été définie dans le même fichier ou dans un fichier chargé avant la tentative d’appel.

Une fonction ne peut pas être appelée si elle n’est pas dans la même portée ou une portée plus grande que celle de la tentative d’appel.

Vous déclarez la fonction myfun dans script1.js, et ensuite dans script2.js vous pouvez simplement appeler myfun();

Fichier: script1.js

function myfun() {
    alert("Hello World!");
}

Fichier: script2.js

myfun();

Fichier: index.html

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

Si vous utilise la bibliothéque jQuery, vous pouvez essayer le code suivant:

Fichier: script1.js

function myfun() {
    alert("Hello World!");
}

Fichier: script2.js

$.getscript("/chemin/vers/script1.js",function(){
   myfun();
});

Vous pouvez déclarer la fonction dans une portée globale avec l’objet window.

Fichier: script1.js

window.myfun = function myfun() {
    alert("Hello World!");
}

Fichier: script2.js

document.getElementById("btn").onclick = function() {
    myfun();
}

Inclure les fichiers comme ceci:

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

Je vous recommande de voir le tutoriel suivant: