javascript 함수에서 html 본문으로 변수를 반환하는 방법

Question

나는 자바 스크립트에 익숙하지 않고, & 자바 스크립트를 사용하여 변수를 반환하는 함수를 얻으려고합니다. 기본적으로이 함수는 사용자가 클릭하는 라디오 버튼을 반환해야합니다.하지만 지금은 아무 것도 반환되지 않습니다.

기능

은 여기에 있습니다 :

는

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

합니다 (함수에서 반환지고있는 것 같다 비록 I 출력 변수가 제대로 작동하고 함수 내부에서 '하여 선택'. 사전에

감사합니다!

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

그렇게 뭔가에 자바 스크립트 기능을 변경

:

<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에 대한 정말 좋은 점은 자바 스크립트 구문을 훨씬 쉽게 만들 수 있다는 것입니다. 자바 스크립트 구문을 이해하기 쉽습니다. 먼저 , 이제 JQuery API

그런 다음이 같은 기능을 다시 쓸 수있는 HTML 페이지

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

에 다음 스크립트 태그를 추가합니다.

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 태그에 값을 삽입하기 만하면됩니다.