2010-08-09 5 views
0

J'ai trouvé un tas d'autres questions sur ce sujet, mais pour une raison quelconque, elles n'ont pas résolu mon "problème".Variantes de variables JavaScript

J'ai ce petit script que j'ai fait d'un pur intérêt - et ça marche très bien, mais quelque chose me dérange. Le script efface un champ de texte onFocus et tape "Write here" si rien n'est entré sur Blu. Le script est la suivante:

<html> 
<head> 
    <title>JavaScript</title> 
    <!--Scripts--> 
    <script type="text/javascript"> 
    <!-- 

    function noValue() {  
    var _value = document.getElementById('input').value; 
    if (_value == "Write here") { 
    document.getElementById('input').value=''; 
    } 
    } 

    function changeValue() { 
    var _value = document.getElementById('input').value; 
    if (_value == "") { 
     document.getElementById('input').value='Write here'; 
    } 
    } 

    function dontLeave() { 
     var c_box = confirm("Do you want to leave?"); 
     if (c_box == true) { 
      die; 
     } 
     else { 
      history.back; 
     } 
    } 
    //--> 
    </script> 
    </head> 

<body onUnload="dontLeave()"> 
<form> 
<input id="input" type="text" value="Write here" onFocus="noValue()" onBlur="changeValue()"> 
</form> 
</body> 

</html> 

Comme vous pouvez le voir la variable _value est utilisé deux fois - dans "NoValue()" et "ChangeValue()". C'est ce que je veux changer.

Je pensais que vous pouvez accéder à une variable globale à l'intérieur d'une fonction en ne déclarant pas à l'intérieur de la fonction fx:

var i = 1; 
function foo(){ 
i++; 
return; 
} 

et la sortie serait 2 si vous appelez la fonction. Mais quand je déclare et initialise la variable en dehors de la fonction, la variable ne fonctionne pas de l'intérieur des fonctions - comment se fait-il? Ai-je mal compris quelque chose ici? :)

J'ai aussi une autre question:
Comme vous pouvez le voir j'ai ajouté une boîte de confirmation lorsque vous quittez la page (je sais que c'est ennuyeux, je ne veux pas l'utiliser, cela est juste une expérience), mais Je ne sais pas comment ne pas quitter la page si le client appuie sur "Annuler". Comment je fais ça? :)

EDIT La première partie de mon problème est maintenant résolu - merci!
Mais theres encore la dernière partie sur le confirm-box ennuyeux; Est-ce que l'un d'entre vous sait comment empêcher le client de partir, pour ainsi dire?

+0

Faites attention à ce que vous faites avec ces fonctions, l'une est de le mettre à "Écrire ici" quand il est vide, et l'autre le change en blanc quand il dit "Ecrire ici". Il pourrait être passer entre les deux beaucoup, ce qui rend difficile de taper quoi que ce soit! –

+0

Tant que je les appelle respectivement onFocus et onBlur qui sont opposés, ne devrait-il pas fonctionner correctement? :) Cela se fait localement, mais si les événements sont mélangés cela peut causer beaucoup de problèmes, vous avez raison :) – Latze

Répondre

1

Pour répondre à votre première question, votre problème avec l'initialisation _value est probablement celui du timing. En plaçant _value en dehors d'une fonction, cette ligne de javascript sera exécutée immédiatement. Comme le javascript est dans la section head, il sera exécuté avant que l'élément d'entrée ait été chargé dans le document. Vous pouvez mettre cette ligne de javascript à la fin du document, après l'élément d'entrée a été chargé, comme celui-ci:

<body onUnload="dontLeave()"> 
<form> 
<input id="input" type="text" value="Write here" onFocus="noValue()" onBlur="changeValue()"> 
</form> 
<script type="text/javascript"> 
    var _value = document.getElementById('input').value; 
</script> 
</body> 

Maintenant la variable javascript « _value » sera réglé correctement et disponible à tous vos fonctions javascript "globalement".

+0

Oh! Le facteur temps n'a jamais traversé mon esprit :) – Latze

+0

Aucun gros, mais j'ai fondamentalement dit exactement la même chose ... mais d'abord: p – jmar777

1

Eh bien, vous pouvez déclarer en dehors des fonctions, mais vous devez mettre à jour la valeur à chaque appel de fonction (c'est-à-dire, chaque événement). Si vous ne le faites pas, comment vos gestionnaires d'événements sauront-ils ce que c'est?

1

Si vous mettez cette ligne ...

var _value = document.getElementById('input').value; 

... en dehors des fonctions, il sera portée dans les fonctions. Je pense que le problème que vous rencontrez est que le placer là le fera exécuter avant que le DOM soit prêt, et donc votre élément 'input' n'existe pas encore. Essayez soit d'attendre un événement de chargement dom, soit placez ce script tout en bas de la page (juste à l'intérieur de la balise </body>).

+0

Pour que ces scripts fonctionnent, je suis à peu près sûr qu'il a besoin d'actualiser la valeur à chaque invocation des gestionnaires d'événements. – Pointy

+0

D'accord - Je pense qu'il y a aussi des problèmes de niveau logique. J'essayais juste d'aborder la question de la portée dans ce commentaire particulier. – jmar777