it-swarm.com.de

Javascript - Benutzereingabe über HTML-Eingabe-Tag zum Festlegen einer Javascript-Variablen?

Ich möchte, dass auf meinem Bildschirm ein Textfeld angezeigt wird (wie das, das ich jetzt eingebe), das Sie eingeben können. Klicken Sie dann auf eine Schaltfläche zum Senden, und alles, was Sie in das Feld eingegeben haben, wird an Javascript gesendet, und es wird gedruckt Mein Code Dies ist der Teil, der funktioniert.

<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, das ist Nizza, aber sagen wir, ich möchte eine Eingabe von diesem Textfeld und der Schaltfläche, während ich bereits in einer Funktion bin und die Funktion nicht neu starten möchte.

Danke, Jake

5
user1836262

Wenn Ihr Skript ausgeführt wird, blockiert es die Seite. Sie können dies auf zwei Arten umgehen:

  • Verwenden Sie var foo = Prompt("Give me input");, wodurch Sie die Zeichenfolge erhalten, die der Benutzer in ein Popup-Feld eingibt (oder null, wenn Sie ihn abbrechen).
  • Teilen Sie Ihren Code in zwei Funktionen auf - führen Sie eine Funktion aus, um die Benutzeroberfläche einzurichten, und stellen Sie dann die zweite Funktion als Rückruf bereit, der ausgeführt wird, wenn der Benutzer auf die Schaltfläche klickt.
10
Dennis

Das ist ein schlechter Stil, aber ich nehme an, Sie haben einen guten Grund, etwas Ähnliches zu tun.

<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

Spätes Lesen dieses Dokuments, aber ... Wenn Sie Ihre Frage lesen, müssen Sie nur zwei Codezeilen ändern:

 

Benutzereingaben akzeptieren, Funktion schreibt zurück auf den Bildschirm.

<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

Ich habe versucht, die Werte der Eingabe-Tags in die JavaScript-Variable zu senden/hinzuzufügen, was für mich gut funktioniert hat.

<!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