2011-10-17 19 views
17

Il file javascript è presente in Public/Scripts/filename.js. Ho un file modello in template/form.tmpl.html. La cartella radice contiene cartelle pubbliche e di modelliCome collegare file javascript esterni onclick del pulsante

Vorrei chiamare il file javascript su clic su un pulsante nel form.tmpl.htm.

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

Grazie

+3

Non è possibile "chiamare un file javascript". Se il file di script è già caricato, puoi "chiamare una funzione javascript in quel file". Oppure, se il file di script non è ancora stato caricato, puoi "caricare il file di script" o "caricare il file di script e chiamare una funzione al suo interno". Quale di questi è quello che vuoi fare? – jfriend00

+1

"Chiama il file js esterno" non significa nulla che si possa chiamare una funzione in un file JS ma non chiamare un file. –

+0

Tecnicamente parlando, il caricamento di un file JavaScript nella dom che contiene codice semplice o funzione autoeseguita è funzionalmente equivalente a chiamare direttamente una funzione. È più efficiente caricare una sola funzione una volta e chiamarla in base alle necessità. L'aggiunta di chiamate a funzioni JS a HTML in linea interrompe la separazione tra contenuto e stato. Tutto JS dovrebbe essere mantenuto all'interno dei file JS. – zzzzBov

risposta

25

Sono d'accordo con le osservazioni di cui sopra, che non si può chiamare un file, ma si potrebbe caricare un file JS come questo, io sono sicuro se si risponde alla tua domanda, ma può aiutare ... oh e ho usato un collegamento al posto di un tasto nel mio esempio ...

<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> 
+1

Dove chiami la funzione che si trova nel file js? – HiTech

+2

Dove? Vuoi dire come? Se lo script è caricato, puoi chiamare normalmente una funzione all'interno dello script caricato. Forse vuoi fare un'altra domanda? –

+1

Ignora la mia domanda. Non avevo capito che questo veniva chiamato nel markup. Grazie per la risposta! – HiTech

14

Se si desidera che il pulsante per richiamare la routine che hai scritto nel filename.js si deve modificare filename.js in modo che il codice che si desidera eseguire sia il corpo di una funzione . Per poter chiamare una funzione, non un file sorgente. (Un file di origine non ha un punto di entrata )

Se il contenuto attuale dei vostri filename.js è:

alert('Hello world');

bisogna cambiarlo in:

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

allora dovete carico filename.js nell'intestazione della pagina HTML dalla linea:

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

in modo da poter chiamata la funzione contenuto in filename.js dal tuo pulsante:

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

ho fatto un po 'esempio di lavoro. Una semplice pagina HTML chiede all'utente di inserire il suo nome e quando fa clic sul pulsante, la funzione all'interno di Public/Scripts/filename.js viene chiamata passando la stringa inserita come parametro in modo che un popup indichi "Hello, <insertedName> !".

Ecco la pagina HTML chiamando:

<html> 
 

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

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

 
</html>

E qui è pubblica/Scripts/filename.js

function functionName(s){ 
 
\t alert('Hello, ' + s + '!'); 
 
}

+0

Scusa, penso che questo sia piuttosto confuso. Il codice non funziona come previsto, usa https://jsfiddle.net/ o qualcosa quando ci sono più file. Inoltre credo che non risponda alla risposta. – partizanos

+1

Grazie per questa risposta dettagliata. Sei un risparmiatore di vita. Questo è l'unico metodo diretto. – antikbd

+1

Questo mi ha aiutato. Sono stato in grado di chiamare la funzione dopo averla caricata all'interno del corpo in modo da non doverla caricare in testa dopo tutto. – mmurrietta

0

Si potrebbe semplicemente fare quanto segue.

Supponiamo di avere il file JavaScript denominato myscript.js nella cartella principale. Aggiungi il riferimento al tuo file sorgente javascript nel tag head del tuo file html.

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

file di JS: (myscript.js)

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

HTML

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

E 'del tutto possibile, ho fatto qualcosa di simile sull'esempio di Mike Sav. Questa è la pagina html e ther Shoul essere un file test.js esterna nella stessa cartella

example.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') 
0

È possibile caricare tutti i vostri script nel tag head e qualsiasi cosa stia facendo lo script nelle parentesi di funzione. Ma assicurati di cambiare l'ambito delle variabili se stai usando quelle variabili al di fuori dello script.

1

Caricando prima il file .js e poi chiamando la funzione tramite onclick, c'è meno codice ed è abbastanza ovvio cosa sta succedendo. Chiameremo il file 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> 

E il contenuto di zipcodehelp.js è:

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."); 
} 

Speranza che aiuta! Saluti!

-Ken

0

Aggiunta di script dinamico a testa È possibile scrivere la funzione e aggiungere un elemento script con src del percorso del file js

+0

Leggi attentamente: https://stackoverflow.com/help/how-to-answer – mrtig

1

sembra, non è possibile chiamare per una funzione in un file js esterno (test su Chrome versione 63.0.3239.132). L'ho provato in molti modi ma non è possibile. Devo usare il listener di eventi.

Problemi correlati