2010-05-03 6 views
1

je le code JavaScript suivant dans ma page HTML référence à un formulaire HTML sur la page:Pourquoi mes variables JavaScript ne persistent-elles pas dans les fonctions?

<script type="text/javascript"> 
<!-- 

var myForm = document.myForm; 

function validateForm() { 
    if (myForm.myInput == "") 
     alert("Please input some text."); 

     return false; 
    } 

    myForm.submit(); 
} 

function showFormInput() { 
    myForm.reset(); 

    document.getElementById('myInput').style.display = 'inline'; 
} 

//--> 
</script> 

... 

<form name="myForm" id="myForm" action="..." method="post"> 
    <input id="myInput" name="myInput" type="text" value="" style="display:none;" /> 
</form> 

Les deux fonctions lancent une exception lorsque vous essayez d'accéder à la myForm variable en disant que « myForm est nulle ou non un objet ". Pourquoi cela se produit-il? Une chose que je pense que je rassemble de ceci est que les variables globales devraient généralement être utilisées pour les littéraux de chaîne - pas les éléments dans le DOM. Je "vais aller de l'avant avec cela, et utiliser des variables d'élément avec parcimonie, et seulement après que le DOM a été chargé

Répondre

10

Quel navigateur utilisez-vous?

En général, vous ne devriez jamais utiliser l'accès document.*. Ceci est une convention MS-IE. Au lieu de cela, utilisez

var myForm = document.getElementById('myForm') ; 
var myInput = document.getElementById('myInput') ; 

if(myInput.value == '') 
{ 
    // its empty! 
} 

Comme outis a noté, que ce soit mettre votre bloc de script au bas de votre page, ou utiliser l'événement onload de < tag corps >, comme celui-ci

<script> 
function go() 
{ 
    alert("The DOM has been assembled and can be accessed.. nOW!!!") ; 
    var myForm = document.getElementById('myForm') ; // ... 
} 
</script> 
<body onload="go() ;"> 
</body> 
+0

+1 pour attraper l'autre problème :) –

+0

Merci. Je vais éviter le document. * À partir de maintenant. –

7

Votre problème est en document.myForm Vous pouvez utiliser:..

var myForm = document.getElementById('myForm'); 

MISES à JOUR: Les autres réponses pris un autre couple de questions:

As bobobobo noted in another answer, vous devez utiliser document.getElementById() pour myForm.myInput ainsi. en plus outis caught another problem comme vous devriez placer votre bloc <script> vers la fin de votre document HTML, juste avant la balise de fermeture </body>. Sinon, votre script s'exécutera avant que le formulaire ne soit inséré dans le DOM.

+0

Vous me battez à lui +1 –

7

Si l'échantillon est représentatif de la page, le formulaire "myForm" n'existe pas lors de l'évaluation du script. En plus d'utiliser document.getElementById (ou document.forms.formName), vous devrez retarder le réglage var myForm jusqu'à ce que l'élément de formulaire soit traité ou, better yet, passer le formulaire en tant qu'argument aux fonctions plutôt qu'en utilisant une variable globale.

+0

+1 bonne prise ... –

+0

Je pensais que cela pourrait être le problème. Ca a du sens. Je vous remercie. –

Questions connexes