Question

我还是javascript的新手，我正在尝试使用html＆amp ;;来获取一个返回变量的函数。 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>

目前似乎没有从函数返回任何内容（尽管如果我在函数内输出变量'selected'，那么它正常工作。

提前致谢！

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)

Answer 2

document.write接受一个字符串，并将其作为HTML的一部分输出。这是不一个实时值，当指向字符串的变量更新时会更新。

为此，您需要执行DOM manipulation。

Answer 3

将您的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>

然后在身体里：

<div id="test"></div>

Answer 4

正如我所说的那样。使用JQuery可以让您的生活更容易完成这类任务（以及许多其他任务）。关于JQuery的一个非常好的事情是它经常使你的JavaScript语法更容易，你可以随时学习javascript的细节。首先，将以下脚本标记添加到您的html页面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

现在你有了JQuery API

然后你可以像这样重写这个函数。

    function GetSelectedItem(btnRadio)
    {
        var jqElem = $(btnRadio);
        $('#output').html(jqElem.attr('value')); //attr('<name of attributre'>) gets the value of the selected attribute
    }

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

.html（）或多或少都可以获取和设置所选元素的html。所以我们只是将值插入div标签。

如何将一个变量从javascript函数返回到html体

4 个答案: