javascript - 如何将变量从javascript函数返回到html主体中

Question

我还是 javascript 的新手，我正在尝试使用 html 和 javascript 获取一个返回变量的函数。基本上，该函数应该只返回用户点击的任何单选按钮，尽管目前我根本看不到返回任何内容。

函数在这里:

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

然后在 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>

目前函数似乎没有返回任何内容(尽管如果我在函数内部输出变量“chosen”那么它工作正常。

提前致谢!

Answer 1

这里有一个更简单的方法。

首先，对您的 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>

然后将脚本更改为:

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

...并将它放在结尾 </body> 内标签。

Click here to test a working example. ^(jsFiddle)