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

Question

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

Answer 1

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)

Answer 2

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.

Answer 3

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>