如何将 javascript 函数中的变量返回到 html 正文中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4706960/
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
How to return a variable from a javascript function into html body
提问by anthr
I am still new to javascript, and I am trying to get a function to return a variable using html & javascript. Basically the function should just return whichever radio button that the user clicks on, although at the moment I don't see anything being returned at all.
我还是 javascript 的新手，我正在尝试使用 html 和 javascript 获取一个函数来返回一个变量。基本上该函数应该只返回用户单击的任何单选按钮，尽管目前我根本看不到任何返回。
The function is here:
函数在这里：
<script type="text/javascript">
function GetSelectedItem() {
var chosen = ""
len = document.f1.r1.length
for (i = 0; i <len; i++) {
if (document.f1.r1[i].checked) {
chosen = document.f1.r1[i].value
}
}
}
return chosen
</script>
And then in the html section I have these radio buttons, and my attempt to get the variable "chosen" output to the screen.
然后在 html 部分，我有这些单选按钮，并尝试将变量“选择”输出到屏幕。
<form name = f1><Input type = radio Name = r1 Value = "ON" onClick=GetSelectedItem()>On
<Input type = radio Name = r1 Value = "OFF" onClick =GetSelectedItem()>Off</form>
<script type ="text/javascript">document.write(chosen)</script>
At the moment nothing seems to be getting returned from the function (although if I output the variable 'chosen' inside the function then it is working correctly.
目前，该函数似乎没有返回任何内容（尽管如果我在函数内部输出变量“选择”，则它可以正常工作。
Thanks in advance!
提前致谢！
采纳答案by user113716
Here's a little simpler approach.
这里有一个更简单的方法。
First, make a few corrections to your HTML, and create a container to display the output:
首先，对您的 HTML 进行一些更正，并创建一个容器来显示输出：
<form name = "f1"> <!-- the "this" in GetSelectedItem(this) is the input -->
<input type = "radio" Name = "r1" Value = "ON" onClick="GetSelectedItem(this)">On
<input type = "radio" Name = "r1" Value = "OFF" onClick ="GetSelectedItem(this)">Off
</form>
<div id="output"></div>
Then change your script to this:
然后将您的脚本更改为：
<script type="text/javascript">
// Grab the output eleent
var output = document.getElementById('output');
// "el" is the parameter that references the "this" argument that was passed
function GetSelectedItem(el) {
output.innerHTML = el.value; // set its content to the value of the "el"
}
</script>
...and place it just inside the closing </body>tag.
...并将其放在结束</body>标签内。
回答by Quentin
document.writetakes a string, and outputs it as part of the HTML. This is nota live value that updates when the variable pointing at the string is updated.
document.write接受一个字符串，并将其作为 HTML 的一部分输出。这不是在指向字符串的变量更新时更新的实时值。
For that, you will need to perform DOM manipulation.
为此，您需要执行DOM 操作。
回答by Martin Buberl
Change your JavaScript function to something like that:
将您的 JavaScript 函数更改为类似的内容：
<script type="text/javascript">
function GetSelectedItem() {
len = document.f1.r1.length;
for (i = 0; i <len; i++) {
if (document.f1.r1[i].checked) {
document.getElementById('test').textContent = document.f1.r1[i].value;
}
}
}
</script>
And then in the body:
然后在体内：
<div id="test"></div>
回答by Feisty Mango
As I put in the post. Using JQuery would make your life easy for this kind of task (and many others for the matter). The really nice thing about JQuery is that it often makes your JavaScript syntax much easier then you can learn the nitty gritty details of javascript as you go. First, add the following script tag into your html page
正如我在帖子中所说的那样。使用 JQuery 将使您轻松完成此类任务（以及许多其他任务）。JQuery 真正的好处在于，它通常使您的 JavaScript 语法更容易，然后您可以边学习边学习 JavaScript 的细节。首先，将以下脚本标记添加到您的 html 页面中
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
Now you have the JQuery API
现在你有了JQuery API
Then you could rewrite the function like this.
然后你可以像这样重写函数。
function GetSelectedItem(btnRadio)
{
var jqElem = $(btnRadio);
$('#output').html(jqElem.attr('value')); //attr('<name of attributre'>) gets the value of the selected attribute
}
Your html would look like this
你的 html 看起来像这样
<form name = "f1">
<input type = "radio" name = "r1" value = "On" onclick="GetSelectedItem(this)">On
<input type = "radio" name = "r1" value = "Off" onclick ="GetSelectedItem(this)">Off
</form>
<div id="output">
</div>
More or less, the .html() can both get and set the html of the selected element. So we are just simply inserting the value into the div tag.
或多或少， .html() 可以获取和设置所选元素的 html。所以我们只是简单地将值插入到 div 标签中。
