Javascript - 用户通过 HTML 输入标签输入来设置 Javascript 变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15305527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - User input through HTML input tag to set a Javascript variable?
提问by user1836262
I want there to be a textbox on my screen(like the one i'm typing in now) that you can type in then click a submit button and it sends whatever you typed in the box to javascript and javascript prints it out.Here is my code This is the part that works.
我希望我的屏幕上有一个文本框（就像我现在输入的那个），你可以输入然后点击提交按钮，它将你在框中输入的任何内容发送到 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>
OK so that's nice, but lets say I want input from that textbox and button while I'm already in a function and don't want to restart the function?
好的，那很好，但是可以说我想要从该文本框和按钮输入，而我已经在一个函数中并且不想重新启动该函数？
Thanks, Jake
谢谢，Hyman
回答by Dennis
When your script is running, it blocks the page from doing anything. You can work around this with one of two ways:
当您的脚本运行时，它会阻止页面执行任何操作。您可以通过以下两种方式之一解决此问题：
- Use
var foo = prompt("Give me input");, which will give you the string that the user enters into a popup box (ornullif they cancel it) - Split your code into two function - run one function to set up the user interface, then provide the second function as a callback that gets run when the user clicks the button.
- 使用
var foo = prompt("Give me input");，它将为您提供用户在弹出框中输入的字符串（或者null如果他们取消它） - 将您的代码拆分为两个函数 - 运行一个函数来设置用户界面，然后提供第二个函数作为用户单击按钮时运行的回调。
回答by Dave
This is bad style, but I'll assume you have a good reason for doing something similar.
这是不好的风格，但我假设你有充分的理由做类似的事情。
<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>
回答by new2
Late reading this, but.. The way I read your question, you only need to change two lines of code:
晚读这个，但是..我读你的问题的方式，你只需要改变两行代码：
Accept user input, function writes back on screen.
接受用户输入，函数在屏幕上写回。
<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>
回答by Sampat Aheer
I tried to send/add input tag's values into JavaScript variable which worked well for me, here is the code:
我尝试将输入标签的值发送/添加到 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>
