2016-07-08 23 views
8

Nel mio HTML definisco la funzione lang nel tag script e aggiungo "Test Fire!" tasto che deve chiamare lang al clic:Unchaught TypeError: lang non è una funzione

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Testing Functions</title> 
 
    <script type="text/javascript"> 
 
    function lang() { 
 
     alert("Hello, World! It's JavaScript this time"); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form action=""> 
 
    <input type="button" value="Test Fire!" onclick="lang();"> 
 
    </form> 
 
</body> 
 

 
</html>

Tuttavia, se si fa clic sul pulsante ottengo questo errore:

Uncaught TypeError: lang is not a function

Ma se cambio il nome della funzione da lang per qualsiasi altra cosa questo codice funziona bene.

+0

interessante ... controlla questo violino: https://jsfiddle.net/h4m1qcoq/ chiama la funzione tramite JS, che ha esito positivo, ma non riesce sul clic. –

+0

Sono interessato a vedere il risultato di questo perché è un problema interessante. –

+0

Sembra che questo sia un problema con l'attributo 'onclick'. Funziona bene assegnando l'onclick anche tramite JS: 'document.getElementById ('foo'). Onclick = lang'. –

risposta

6

Considerate questo codice:

<input type="button" value="Test Fire!" onclick="debugger;" />

Quando si apre il debugger, vedrai che ci sembra essere un implicito with ambito avvolto intorno al onclick, rendendo tutto il <input> ' Le proprietà di s sono accessibili senza la necessità di fare riferimento al pulsante.

Ciò significa che tutti gli attributi globali (lang sono uno di essi) e molti altri specifici dei pulsanti sono sovrascritti. Per esempio. value, type inoltre non funzionerebbe.

La soluzione migliore è utilizzare il modo standard di aggiungere listener di eventi: addEventListener.

<input type="button" value="Test Fire!" /> 
 
<script> 
 
    function lang() { 
 
    alert("Hello, World! It's JavaScript this time"); 
 
    } 
 
    document.querySelector("input").addEventListener("click", lang); 
 
</script>

+0

Quindi presumo che sia Firefox che Chrome abbiano questo ambito 'with', mentre IE no? –

+0

@SpencerWieczorek Questo sembra essere il caso per questi tre browser. Anche questo problema è nuovo per me. Non sono sicuro che si tratti di una funzionalità specificata e documentata ... Per Firefox, almeno, questo non sembra essere correlato alla modalità quirks. – Xufox

+0

In qualche modo, IE è riuscito a eseguire questo codice. Qualche indizio perché così? – SanyamMishra

2

Non v'è alcun motivo di complicare (io davvero non so perché non funziona), ma è possibile utilizzare:

  • Aggiungere direttamente l'avviso nell'input.

Risultato: https://jsfiddle.net/cmedina/h4m1qcoq/6/

o

Aggiungi all'ascoltatore di ingresso

function lang() { 
    alert("Hello, World! It's JavaScript this time"); 
} 

document.getElementById('test').onclick = lang 

Risultato: https://jsfiddle.net/cmedina/h4m1qcoq/7/

+0

Il mio scopo qui non è quello di generare un avviso. Ho appena illustrato che chiamare "lang()" non funziona. – SanyamMishra

+1

@SanyamMishra quindi aggiungi listener a pulsante la mia seconda opzione! – CMedina

Problemi correlati