How to return a variable from a javascript function into html body

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.

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.

  <form name = f1><Input type = radio Name = r1 Value = "ON" onClick=GetSelectedItem()>On
  <Input type = radio Name = r1 Value = "OFF" onClick =GetSelectedItem()>Off</form开发者_JS百科>
  <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!

Here's a little simpler approach.

First, make a few corrections to your HTML, and create a container to display the output:

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

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

document.write takes a string, and outputs it as part of the HTML. This is not a live value that updates when the variable pointing at the string is updated.

For that, you will need to perform DOM manipulation.

Change your JavaScript function to something like that:

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

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

<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

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

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