51 votes

Comment lier un fichier javascript externe en cliquant sur un bouton

Je voudrais appeler une fonction javascript dans un fichier JS externe, en utilisant la fonction onClick sur un bouton de ce fichier, form.tmpl.htm .

   <button type="button" value="Submit" onClick="Call the external js file" >

Le fichier javascript est en Public/Scripts/filename.js . J'ai un fichier modèle en template/form.tmpl.html . Le dossier racine contient les dossiers Public et template .

52voto

Mike Sav Points 2736

Je suis d'accord avec les commentaires ci-dessus, que vous ne pouvez pas appeler un fichier, mais vous pouvez charger un fichier JS comme celui-ci, je ne sais pas si cela répond à votre question mais cela peut aider... oh et j'ai utilisé un lien au lieu d'un bouton dans mon exemple...

 <a href='linkhref.html' id='mylink'>click me</a>

<script type="text/javascript">

var myLink = document.getElementById('mylink');

myLink.onclick = function(){

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "Public/Scripts/filename.js."; 
    document.getElementsByTagName("head")[0].appendChild(script);
    return false;

}


</script>

8voto

Kenneth Wagner Points 91

En chargeant d' .js , puis en appelant la fonction via onclick, il y a moins de codage et ce qui se passe est assez évident. Nous appellerons le fichier JS zipcodehelp.js .

HTML :

 <!DOCTYPE html>
<html>
<head>
    <title>Button to call JS function.</title>
</head>
<body>
    <h1>Use Button to execute function in '.js' file.</h1>
    <script type="text/javascript" src="zipcodehelp.js"></script>
    <button onclick="ZipcodeHelp();">Get Zip Help!</button>
</body>
</html>

Et le contenu de zipcodehelp.js est :

 function ZipcodeHelp() {
  alert("If Zipcode is missing in list at left, do: \n\n\
    1. Enter any zipcode and click Create Client. \n\
    2. Goto Zipcodes and create new zip code. \n\
    3. Edit this new client from the client list.\n\
    4. Select the new zipcode." );
}

J'espère que cela pourra aider! À votre santé!

–Ken

6voto

partizanos Points 484

C'est tout à fait possible, j'ai fait quelque chose de similaire en me basant sur l'exemple de Mike Sav. C'est la page html et il devrait y avoir un fichier test.js externe dans le même dossier

exemple.html :

 <html>
<button type="button" value="Submit" onclick="myclick()" >
Click here~!
<div id='mylink'></div>
</button>
<script type="text/javascript">
function myclick(){
    var myLink = document.getElementById('mylink');
    myLink.onclick = function(){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "./test.js"; 
            document.getElementsByTagName("head")[0].appendChild(script);
            return false;
    }
    document.getElementById('mylink').click();
}
</script>
</html>

test.js :

 alert('hello world')

2voto

ShellZero Points 1611

Vous pouvez simplement faire ce qui suit.

Disons que vous avez le fichier JavaScript nommé myscript.js dans votre dossier racine. Ajoutez la référence à votre fichier source javascript dans votre balise head de votre fichier html.

 <script src="~/myscript.js"></script>

Fichier JS : ( myscript.js )

 function awesomeClick(){
  alert('awesome click triggered');
}

HTML

 <button type="button" id="jstrigger" onclick="javascript:awesomeClick();">Submit</button>

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