Bir javascript işlevinden bir değişken html gövdesine nasıl geri dönülür

Question

Hala javascript için yeni ve html & javascript kullanarak bir değişken döndürmek için bir işlev almaya çalışıyorum. Temel olarak, işlev, kullanıcının geri döndüğü herhangi bir radyo düğmesine geri dönmelidir, ancak şu anda herhangi bir şeyin iade edilmediğini görmüyorum.

fonksiyon

buradadır:

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

Sonra html ben bu radyo düğmeleri bölümünde ve değişken almak için benim girişimi ekrana çıktı "seçilmiş". an hiçbir şey de

<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şlevinden döndürülen almak gibi görünse de ben çıkış değişkeni doğru çalışıp çalışmadığını sonra işlevi içinde 'seçilenin'. peşin

Teşekkür!

Answer 1

İşte biraz daha basit bir yaklaşım.

Öncelikle HTML'nize birkaç düzeltmeler yapmak ve görüntü çıkışı için bir kapsayıcı oluşturun:

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

O zaman bu senaryonun değiştirin:

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

... ve koyun sadece kapanış </body> etiketinin içinde.

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

Answer 2

eğer document.write HTML parçası olarak bir dize ve çıkışları alır. Bu değil dizge'nin değişken işaret güncellenir güncellemeler canlı değerdir. Bunun için

, olacak DOM manipulation gerçekleştirmeniz gerekir.

Answer 3

böyle bir şey için JavaScript işlevi değiştirin

:

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

Ve sonra vücutta:

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

Answer 4

ben sonrası koymak gibi. JQuery'yi kullanarak hayatınızı bu tür bir görev için (ve konuya ilişkin diğer pek çok şey için) kolaylaştırabilirsiniz. JQuery ile ilgili gerçekten güzel olan şey, JavaScript sözdizimini çok daha kolay hale getirmesidir, o zaman gittiğinizde javascript'in nitty detaylarını öğrenebilirsiniz. İlk , Şimdi JQuery API

Sonra böyle işlevini yeniden olabilir var html sayfa

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

aşağıdaki komut dosyası etiketi ekleyin.

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

Kişisel html Az ya da çok bu

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

gibi görünecektir, .html() almak ve seçilen elemanın html ayarlayabilirsiniz hem.Bu yüzden değeri sadece div etiketine ekliyoruz.