使用Javascript - 通过HTML input标签用户输入设置一个JavaScript变量

我希望这是我的屏幕上的文本框（如一个现在我打字的），您可以键入然后单击提交按钮，并将其发送你输入任何在框中javascript和JavaScript显示它out.Here是我的代码这是工作的一部分。

<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所以这是很好的，但可以说，我想从文本框和按钮输入，同时我在一个功能就是已经不希望重新启动功能？

谢谢你，杰克

Answer 1:

当你的脚本运行时，页面做任何事情它块。您可以解决此用两种方法之一：

使用var foo = prompt("Give me input"); ，这将给你的字符串，用户进入一个弹出框（或null ，如果他们取消）
拆分代码成两个功能 - 运行一个函数来设置用户界面，然后提供第二个功能，当用户点击按钮获取运行回调。

Answer 2:

这是不良作风，但我会假设你有一个很好的理由这样做类似的东西。

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

Answer 3:

晚读这篇文章，但..我看了你的问题的样子，你只需要改变两行代码：

接受用户输入，功能回写在屏幕上。

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

Answer 4:

我试图发送/添加输入标签的值到这对我来说行之有效JavaScript变量，这里是代码：

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

文章来源: Javascript - User input through HTML input tag to set a Javascript variable?