Cómo devolver una variable desde una función javascript al cuerpo html

Question

Todavía soy nuevo en javascript, y estoy tratando de obtener una función para devolver una variable usando html & javascript. Básicamente, la función debería devolver el botón de opción que el usuario haga clic, aunque en este momento no veo nada devuelto.

la función está aquí:

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

Y a continuación, en la sección html tengo estos botones de radio, y mi intento de conseguir la variable "escogidos" salida a la pantalla.

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

En el momento nada parece ser cada vez devuelto por la función (aunque si la salida que la variable 'elegido' dentro de la función luego de que funciona correctamente.

Gracias de antemano!

Answer 1

Aquí hay un enfoque un poco más simple.

En primer lugar, hacer algunas correcciones a su HTML y crear un contenedor para mostrar la salida:

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

luego cambia de secuencia de comandos para esto:

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

... y colocarlo justo dentro de la etiqueta de cierre </body>.

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

Answer 2

document.write toma una cadena, y la envía como parte del HTML. Esto es no un valor vivo que se actualiza cuando la variable apuntando a la cadena se actualiza.

Para ello, se quiere necesita realizar DOM manipulation.

Answer 3

Cambiar la función JavaScript para algo así:

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

Y luego en el cuerpo:

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

Answer 4

Como pongo en el post. Usar JQuery te facilitaría la vida para este tipo de tareas (y para muchas otras). Lo realmente bueno de JQuery es que a menudo hace que tu sintaxis de JavaScript sea mucho más fácil que luego puedes aprender los detalles esenciales de javascript sobre la marcha. En primer lugar, agregue la etiqueta siguiente secuencia de comandos en su página html

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

Ahora usted tiene la JQuery API

entonces se podría volver a escribir la función como esta.

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

su HTML se vería así

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

Más o menos, el html() puede obtener y establecer tanto el código HTML del elemento seleccionado.Entonces, simplemente estamos insertando el valor en la etiqueta div.