Как вернуть переменную из функции javascript в html body

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> 

На данный момент ничего, кажется, получение возвращается из функции (хотя, если я вывожу переменная «избранника» внутри функции, то он правильно работает.

Заранее спасибо!

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.