Comment faire pour relier un fichier javascript externe en un clic de bouton

le fichier javascript est disponible dans Public/Scripts / filename.js. J'ai un fichier de modèle de modèle/de la forme.tmpl.HTML. Le dossier racine contient des dossiers publics et des templates

je voudrais appeler le fichier javascript onClick d'un bouton dans le formulaire.tmpl.htm.

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

Merci

24
demandé sur verdure 2011-10-17 08:54:21
la source

8 ответов

je suis d'accord avec les commentaires ci-dessus, que vous ne pouvez pas appeler un fichier, mais vous pouvez charger un fichier JS de ce genre, je ne suis pas sûr si cela répond à votre question, mais il 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>
29
répondu Mike Sav 2011-10-17 09:48:45
la source

si vous voulez que votre bouton appelle la routine que vous avez écrite dans nom de fichier.js vous devez modifier le nom de fichier.js de sorte que le code que vous voulez exécuter est le corps d'un function. Vous pouvez appeler une fonction, un fichier source. (Un fichier source n'a pas de point d'entrée)

si le contenu courant de votre nom de fichier.js:

alert('Hello world');

vous devez le changer à:

function functionName(){
	alert('Hello world');
}

Ensuite, vous devez vous charger nom du fichier.js dans l'en-tête de votre page html par la ligne:

<head>
	<script type="text/javascript" src="Public/Scripts/filename.js"></script>
</head>

pour que vous puissiez appel function contenu dans le nom de fichier.js par votre bouton:

<button onclick="functionName()">Call the function</button>

j'ai fait un petit exemple de travail. Une simple page HTML demande à l'utilisateur d'entrer son nom, et quand elle clique sur le bouton, le fonction à l'intérieur d'Publique/Scripts/nom de fichier.js s'appelle passer la chaîne insérée comme paramètre pour qu'un popup dise "Hello, !".

Voici la page HTML appelant:

<html>

	<head>
		<script type="text/javascript" src="Public/Scripts/filename.js"></script>
	</head>

	<body>
		What's your name? <input  id="insertedName" />
		<button onclick="functionName(insertedName.value)">Say hello</button>
	</body>

</html>

et Voici Public/Scripts/filename.js

function functionName( s ){
	alert('Hello, ' + s + '!');
}
19
répondu Fry Simpson 2015-02-19 18:09:21
la source

c'est tout à fait possible, j'ai fait quelque chose de similaire basé sur L'exemple de Mike Sav. C'est la page html et il devrait y avoir un test externe.fichier js 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>

de test.js:

alert('hello world')
4
répondu partizanos 2015-08-27 12:25:20
la source

chargement .js d'abord classer et ensuite appeler la fonction via onclick, il y a moins de codage et c'est assez évident ce qui se passe. Nous allons appeler 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 ça aide! Acclamations!

- Ken

3
répondu Kenneth Wagner 2017-07-30 05:45:09
la source

vous pouvez simplement faire ce qui suit.

disons que vous avez le fichier JavaScript nommé myscript.js dans votre dossier racine. Ajouter la référence de 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>
1
répondu ShellZero 2017-07-30 03:56:06
la source

il semble qu'il soit impossible de faire appel à une fonction dans un fichier JS externe (test sur la version chrome 63.0.3239.132). J'ai essayé de bien des façons, mais c'est impossible. Je dois utiliser l'écouteur d'événements.

1
répondu Võ Minh 2018-02-20 07:11:27
la source

Vous pouvez charger tous vos scripts dans le head balise, et quel que soit votre script en fonction des accolades. Mais assurez-vous de changer la portée des variables Si vous utilisez ces variables en dehors du script.

0
répondu user6200788 2016-04-13 23:08:07
la source

ajout du script dynamique à la tête Vous pouvez écrire la fonction et Ajouter un élément de script avec src du chemin de fichier js

0
répondu ganeshradj 2018-01-11 05:06:16
la source

Autres questions sur