web-dev-qa-db-fra.com

Javascript - Entrée utilisateur via une balise HTML pour définir une variable Javascript?

Je veux qu’il y ait une zone de texte sur mon écran (comme celle que je tape en ce moment) dans laquelle vous pouvez taper puis cliquer sur le bouton Envoyer et il envoie tout ce que vous avez tapé dans la boîte à javascript et javascript l’imprime. mon code C'est la partie qui fonctionne.

<html>
<body>
    <input type="text" id="userInput"=>give me input</input>
    <button onclick="test()">Submit</button>
    <script>
        function test()
        {
            var userInput = document.getElementById("userInput").value;
            document.write(userInput);
        }
    </script>
</body>
</html>

OK, c'est bien, mais disons que je veux une entrée depuis cette zone de texte et ce bouton alors que je suis déjà dans une fonction et que je ne veux pas la redémarrer?

Merci, Jake

javascripthtmlhtml5inputuser-input
5
user1836262

Lorsque votre script est en cours d'exécution, il empêche la page de faire quoi que ce soit. Vous pouvez contourner ce problème de deux manières:

  • Utilisez var foo = Prompt("Give me input");, qui vous donnera la chaîne que l'utilisateur entre dans une boîte de dialogue (ou null s'il l'annule)
  • Divisez votre code en deux fonctions: exécutez une fonction pour configurer l'interface utilisateur, puis fournissez la deuxième fonction sous forme de rappel à exécuter lorsque l'utilisateur clique sur le bouton.
10
Dennis

C'est un mauvais style, mais je suppose que vous avez une bonne raison de faire quelque chose de similaire.

<html>
<body>
    <input type="text" id="userInput">give me input</input>
    <button id="submitter">Submit</button>
    <div id="output"></div>
    <script>
        var didClickIt = false;
        document.getElementById("submitter").addEventListener("click",function(){
            // same as onclick, keeps the JS and HTML separate
            didClickIt = true;
        });

        setInterval(function(){
            // this is the closest you get to an infinite loop in JavaScript
            if( didClickIt ) {
                didClickIt = false;
                // document.write causes silly problems, do this instead (or better yet, use a library like jQuery to do this stuff for you)
                var o=document.getElementById("output"),v=document.getElementById("userInput").value;
                if(o.textContent!==undefined){
                    o.textContent=v;
                }else{
                    o.innerText=v;
                }
            }
        },500);
    </script>
</body>
</html>
4
Dave

Si vous lisez ceci tardivement, mais ... à la lecture de votre question, il suffit de changer deux lignes de code

 

Accepter la saisie de l'utilisateur, la fonction réécrit à l'écran.

<input type="text" id="userInput"=> give me input</input>
<button onclick="test()">Submit</button>

<!-- add this line for function to write into -->
<p id="demo"></p>   

<script type="text/javascript">
function test(){
    var userInput = document.getElementById("userInput").value;
    document.getElementById("demo").innerHTML = userInput;
}
</script>

2
new2

J'ai essayé d'envoyer/ajouter les valeurs des balises d'entrée dans une variable JavaScript qui a bien fonctionné pour moi, voici le code:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function changef()
            {
            var ctext=document.getElementById("c").value;

            document.writeln(ctext);
            }

        </script>
    </head>
    <body>
        <input type="text" id="c" onchange="changef"();>

        <button type="button" onclick="changef()">click</button>
    </body> 
</html>
0
Sampat Aheer