将 HTML 中的文本表单值输入到 Javascript 函数中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18231836/
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
Input text form value from HTML into Javascript function
提问by Xochi
Beginner question, I am currently learning JS and I'm trying to write a function that will take a text input from a simple html form. I can't figure out how to pass the text input into the function. This is what I am currently trying:
初学者问题，我目前正在学习 JS，我正在尝试编写一个函数，该函数将从简单的 html 表单中获取文本输入。我不知道如何将文本输入传递给函数。这就是我目前正在尝试的：
<html>
<body>
<script type = "text/javascript">
<!--
var myColor = document.getElementById("textbox").value;
function findColor(){
switch(myColor){
case "Blue":
document.write("just like the sky!");
break
case "Red":
document.write("Just like wine!");
break
default:
document.write("Suit yourself then...");
}
}
//-->
</script>
<form>
Colour <input type="text" name="inputform" id="textbox" value="">
<input type="submit" value="Submit" onclick="findColor();">
</form>
</body>
</html>
Thanks, any help appreciated.
谢谢，任何帮助表示赞赏。
回答by David Hellsing
Put this line:
把这一行：
var myColor = document.getElementById("textbox").value;
Inside the findColorfunction:
findColor函数内部：
function findColor(){
var myColor = document.getElementById("textbox").value;
switch(myColor){ //...
回答by Vinay
I'm with David's answer. You are using a form and you need to prevent default submission event like below by pasing a event parameter to the function as shown in the below code.
我同意大卫的回答。您正在使用表单，并且需要通过将事件参数传递给函数来防止如下所示的默认提交事件，如下面的代码所示。
function findColor(e){ // e is a event parameter passed
e.preventDefault();
var myColor = document.getElementById("textbox").value;
switch(myColor){
case "Blue":
document.write("just like the sky!");
break
case "Red":
document.write("Just like wine!");
break
default:
document.write("Suit yourself then...");
}
return false;
}
and in html,
在 html 中，
<input type="submit" value="Submit" onclick="findColor(event);">
As you can see I'm passing event like this findColor(event)in html
正如你所看到的，我findColor(event)在 html 中传递这样的事件
And a suggestion :
还有一个建议：
read about the document.writehereand see a demohere the author explained it very neatly as
阅读document.write这里并在这里查看演示作者非常巧妙地解释了它
The use of document.write where native DOM alternatives such as document.createElement are more appropriate. document.write has been grossly misused over the years and has quite a few disadvantages including that if it's executed after the page has been loaded it can actually overwrite the page we're on, whilst document.createElement does not. We can see here for a live example of this in action. It also doesn't work with XHTML which is another reason opting for more DOM-friendly methods such as document.createElement is favorable.
在诸如 document.createElement 等原生 DOM 替代品更合适的地方使用 document.write。多年来，document.write 一直被严重滥用，并且有很多缺点，包括如果在页面加载后执行它，它实际上可以覆盖我们所在的页面，而 document.createElement 则不会。我们可以在这里看到一个实际的例子。它也不适用于 XHTML，这是选择对 DOM 更友好的方法（例如 document.createElement）有利的另一个原因。
回答by monika mevenkamp
when the browser reads your html page it interprets the javascript section thus defining your findColor function and executing the line
当浏览器读取您的 html 页面时，它会解释 javascript 部分，从而定义您的 findColor 函数并执行该行
var myColor = document.getElementById("textbox").value;
Therefor myColor receives the initial value of your textbox element. By the time the page is fully loaded and you enter a value in the textbox the myColor assignment is already done. To make sure that the assignment is done at the right time, after clicking submit, aka when the findColor functiom is called, you have the two options mentioned above: Make the assignemt the first statement in your findColor function OR make it a parameter to the findColor function
因此 myColor 接收文本框元素的初始值。当页面完全加载并在文本框中输入一个值时，myColor 分配已经完成。为确保分配在正确的时间完成，单击提交后，也就是调用 findColor 函数时，您有上面提到的两个选项：将assignemt 设为 findColor 函数中的第一条语句，或者将其设为findColor 函数
There is a second flaw in this example. A form's submit triggers reloading of an HTML page. Therefore you never see the result of your findColor function. A better way to play with Javascript is to tie functions to buttons. See the revised html below.
这个例子还有第二个缺陷。表单的提交会触发 HTML 页面的重新加载。因此，您永远不会看到 findColor 函数的结果。使用 Javascript 的更好方法是将功能绑定到按钮。请参阅下面的修改后的 html。
I trust you have seen the w3school JavaScript tutorials http://www.w3schools.com/js/. Have a look at http://www.netmagazine.com/tutorials/javascript-debugging-beginners.
我相信您已经看过 w3school JavaScript 教程http://www.w3schools.com/js/。看看http://www.netmagazine.com/tutorials/javascript-debugging-beginners。
<html>
<body>
<script type = "text/javascript">
function findColor(myColor){
output = document.getElementById('output');
switch(myColor){
case "Blue":
output.innerHTML = "Just like the sky";
break
case "Red":
output.innerHTML = "Just like the wine";
break
default:
output.innerHTML ="Suit yourself then...";
}
}
</script>
<form>
Colour <input type="text" name="inputform" id="textbox" value="">
</form>
<button type="button" onclick="findColor(document.getElementById('textbox').value);"> FindColor </button>
</form>
<div id="output"> what I think of this color </div>
</body>
</html>
回答by DavidB
Or to pass it to the function do this:
或者将其传递给函数执行以下操作：
<input type="submit" value="Submit" onclick="findColor('Blue');">
function findColor(myColor){
switch(myColor){
case "Blue":
document.write("just like the sky!");
break
case "Red":
document.write("Just like wine!");
break
default:
document.write("Suit yourself then...");
}
}
