web-dev-qa-db-fra.com

Comment obtenir une valeur de texte d'entrée en JavaScript

Comment obtenir une valeur de texte d'entrée en JavaScript?

<script language="javascript" type="text/javascript">
    lol = document.getElementById('lolz').value;
    function kk(){
    alert(lol);
    }
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
</body>

Lorsque je mets lol = document.getElementById('lolz').value; en dehors de la fonction kk(), comme indiqué ci-dessus, cela ne fonctionne pas, mais lorsque je le mets à l'intérieur, cela fonctionne. Quelqu'un peut-il me dire pourquoi?

javascripttextinputget
60
Maria

La raison pour laquelle votre fonction ne fonctionne pas lorsque lol est défini en dehors de celle-ci, c'est parce que DOM n'est pas encore chargé lors de la première exécution de JavaScript. A cause de cela, getElementById retournera null ( voir MDN ).

Vous avez déjà trouvé la solution la plus évidente: en appelant getElementById dans la fonction, le DOM sera chargé et prêt au moment de l'appel de la fonction et l'élément sera trouvé comme vous le souhaitiez.

Il y a quelques autres solutions. L'une consiste à attendre que tout le document soit chargé, comme ceci:

<script type="text/javascript">
    var lolz;
    function onload() { 
        lolz = document.getElementById('lolz');
    }
    function kk(){
        alert(lolz.value);
    }
</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" onclick="kk();"/>
</body>

Notez l'attribut onload de la balise <body>. (Remarque: l'attribut language de la balise <script> est obsolète. Ne l'utilisez pas.)

Il y a cependant un problème avec onload: il attend que tout soit chargé (y compris les images, etc.).

L'autre option consiste à attendre que le DOM soit prêt (ce qui est généralement beaucoup plus tôt que onload). Cela peut être fait avec du JavaScript "simple", mais il est beaucoup plus facile d'utiliser une bibliothèque DOM comme jQuery .

Par exemple:

<script type="text/javascript">
    $(document).ready(function() {
        var lolz = $('#lolz');
        var kk = $('#kk');
        kk.click(function() {
            alert(lolz.val());
        });
    });
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" id="kk" />
</body>

jQuery's . ready () prend une fonction en tant qu'argument. La fonction sera exécutée dès que le DOM est prêt. Ce deuxième exemple utilise également . Click () pour lier le gestionnaire onclick de kk, au lieu de le faire en ligne dans le code HTML.

67
PPvG

N'utilisez pas les variables globales de cette manière. Même si cela pourrait fonctionner, c'est un mauvais style de programmation. Vous pouvez écraser par inadvertance des données importantes de cette manière. Faites ceci à la place:

<script type="text/javascript">
   function kk(){
       var lol = document.getElementById('lolz').value;
       alert(lol);
   }
</script>

Si vous insistez pour que var lol soit placé en dehors de la fonction kk, alors je propose cette solution:

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
    <script type="text/javascript">
       var lol = document.getElementById('lolz');
       function kk() {
           alert(lol.value);
       }
    </script>
</body>

Notez que l'élément script doit suivre l'élément input auquel il fait référence, car les éléments ne peuvent être interrogés qu'avec getElementById s'ils ont déjà été analysés et créés.

Les deux exemples fonctionnent, testés dans jsfiddler.

Edit : J'ai supprimé l'attribut language="javascript", car il est obsolète. Voir Spécification W3 HTML4, l'élément SCRIPT :

langue = cdata [ CI ]

Obsolète . Cet attribut spécifie le langage de script du contenu de cet élément. Sa valeur est un identifiant pour la langue, mais comme ces identifiants ne sont pas standard, cet attribut a été obsolète en faveur de type.

et

Un élément ou un attribut obsolète est un élément qui a été obsolète par les nouvelles constructions. […] Les éléments obsolètes risquent de devenir obsolètes dans les futures versions de HTML. […] Cette spécification comprend des exemples illustrant comment éviter d'utiliser des éléments obsolètes. […]

13
nalply
<script type="text/javascript">
function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}


</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" id="lolz" value=""/>
    <input type="button" value="click" onclick="kk();"/>
</body>

utilisez ceci

6
DOCTYPE HTML

Modifier:

  1. Déplacez votre javascript à la fin de la page pour vous assurer que DOM (éléments html) est chargé avant de pouvoir y accéder (javascript à terminer pour un chargement rapide).
  2. Déclarez vos variables toujours comme dans l'exemple en utilisant var textInputVal = document.getElementById ('textInputId'). Value;
  3. Utilisez des noms descriptifs pour les entrées et les éléments (facilite la compréhension de votre propre code et du regard de quelqu'un d'autre).
  4. Pour en savoir plus sur getElementById, voir: http://www.tizag.com/javascriptT/javascript-getelementbyid.php
  5. L'utilisation de bibliothèques telles que jQuery facilite l'utilisation de javascript cent fois plus facilement, pour en savoir plus: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
6
Mauno Vähä

Notez que cette ligne:

lol = document.getElementById('lolz').value;

est avant l'élément <input> réel sur votre balise:

<input type="text" name="enter" class="enter" value="" id="lolz"/>

Votre code est analysé ligne par ligne et la ligne lol = ... est évaluée avant que le navigateur ne connaisse l’existence d’une entrée avec id lolz. Ainsi, document.getElementById('lolz') renverra null et document.getElementById('lolz').value devraient provoquer une erreur.

Déplacez cette ligne dans la fonction, et cela devrait fonctionner. De cette façon, cette ligne ne fonctionnera que lorsque la fonction sera appelée. Et utilisez var comme d'autres l'ont suggéré, pour éviter d'en faire une variable globale:

function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}

Vous pouvez également déplacer le script à la fin de la page. Le déplacement de tous les blocs de script jusqu'à la fin de votre code HTML <body> est la pratique courante aujourd'hui pour éviter ce type de problème de référence. Cela a également tendance à accélérer le chargement des pages, car les scripts dont le chargement et l'analyse sont longs sont traités une fois que le code HTML a été affiché.

6
bfavaretto

Comment obtenir une valeur de texte d'entrée en JavaScript

    var textbox;
    function onload() { 
        //Get value.
        textbox = document.getElementById('textbox');
    }

    function showMessage() { 
        //Show message in alert()
        alert("The message is: " + textbox.value);
    }
<body onload="onload();">
<div>
<input type="text" name="enter" class="enter" placeholder="Write something here!" value="It´s a wonderful day!" id="textbox"/>
<input type="button" value="Show this message!" onClick="showMessage()" />
</div>
3
Jorgesys
<script>
function subadd(){
subadd= parseFloat(document.forms[0][0].value) + parseFloat(document.forms[0][1].value) 
window.alert(subadd)  
}
</script>

<body>
<form>
<input type="text" >+
<input type="text" >
<input type="button" value="add" onclick="subadd()">
</form>
</body>
2
Scott

comme votre lol est une variable locale, sa pratique consiste à utiliser le mot-clé var pour déclarer toute variable.

cela peut fonctionner pour vous:

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}
2
Shreedhar
<input type="password"id="har">
<input type="submit"value="get password"onclick="har()">
<script>
    function har() {
        var txt_val;
        txt_val = document.getElementById("har").value;
        alert(txt_val);
    }
</script>
2
harsh mangalam

Toutes les solutions ci-dessus sont utiles. Et ils ont utilisé la ligne lol = document.getElementById('lolz').value; à l'intérieur de la fonction function kk().

Ce que je suggère, c'est que vous pouvez appeler cette variable depuis une autre fonction fun_inside()

function fun_inside()
{    
lol = document.getElementById('lolz').value;
}
function kk(){
fun_inside();
alert(lol);
}

Cela peut être utile lorsque vous construisez des projets complexes.

2
htoniv

document.getElementById ('id'). value

1
Selva Raj

Cela ne fonctionne pas parce que la variable ne change pas avec la zone de texte. Lorsqu'il exécute le code pour la première fois, il obtient la valeur de la zone de texte, mais il n'est plus appelé par la suite. Toutefois, lorsque vous définissez la variable dans la fonction, la variable est mise à jour chaque fois que vous appelez la fonction. Ensuite, il alerte la variable qui est maintenant égale à l'entrée de la zone de texte.

0
user6797340