Javascript - 用户通过 HTML 输入标签输入来设置 Javascript 变量？答案

【问题标题】：Javascript - User input through HTML input tag to set a Javascript variable?Javascript - 用户通过 HTML 输入标签输入来设置 Javascript 变量？
【发布时间】：2013-03-09 00:09:42
【问题描述】：

我希望我的屏幕上有一个文本框（就像我现在输入的那个），您可以输入然后单击提交按钮，它将您在框中输入的任何内容发送到 javascript，然后 javascript 将其打印出来.这是我的代码这是有效的部分。

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

好的，这很好，但是假设我想在已经在函数中并且不想重新启动函数时从该文本框和按钮输入？

谢谢，杰克

【问题讨论】：

我真的不明白你最后一句话在说什么。我的意思是。您已经在一个函数中并且不想重新启动它。这是什么意思？
所以如果我想用它启动一个函数，我的代码可以工作，但我希望提交按钮在函数已经运行时基本上可以工作。我会向按钮添加什么属性来做到这一点？当前启动“test()”函数将不起作用，因为我不想重新启动该函数。
你的意思是你想要一个循环等待输入的函数吗？这在javascript中不起作用。除此之外，您可以随时随地使用document.getElementById("userInput").value。
不要使用 document.write 它是邪恶的谷歌用于 innerHTML 并重新格式化您的代码...
学习附加事件处理程序而不是使用内联的“onclick”定义。

标签： javascript html input user-input

【解决方案1】：

当您的脚本运行时，它会阻止页面执行任何操作。您可以通过以下两种方式之一解决此问题：

使用var foo = prompt("Give me input");，它将为您提供用户在弹出框中输入的字符串（或null，如果他们取消它）
将您的代码拆分为两个函数 - 运行一个函数来设置用户界面，然后将第二个函数作为回调提供，当用户单击按钮时该函数会运行。

【讨论】：

谢谢，我把它分成2个功能

【解决方案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>

【讨论】：

Javascript 在事件驱动时效果最好，而不是具有单一的全能循环。只有在绝对有必要以特定顺序发生事情并且您没有其他方法可以强制执行时，您才应该这样做。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：