Wie eine Variable von einer Javascript-Funktion in HTML-Körper

Question

zurückgegeben werde Ich bin noch neu in Javascript, und ich versuche, eine Funktion zu erhalten, um eine Variable mit HTML & Javascript zurückgeben. Grundsätzlich sollte die Funktion nur den Radioknopf zurückgeben, auf den der Benutzer klickt, obwohl ich im Moment überhaupt nichts zurückgegeben sehe.

Die Funktion ist hier:

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

Und dann in dem HTML-Abschnitt I diese Radio-Buttons haben, und meinen Versuch, die Variable „gewählt“ Ausgabe auf den Bildschirm zu bekommen.

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

Im Moment scheint nichts von der Funktion zurückgegeben wird immer (obwohl, wenn ich Ausgang der Variable ‚Auserwählter‘ innerhalb der Funktion dann wird es richtig funktioniert.

Vielen Dank im Voraus!

Answer 1

Hier ist ein etwas einfacherer Ansatz.

Zuerst ein paar Änderungen an Ihrer HTML machen, und einen Container erstellen die Ausgabe anzuzeigen:

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

... und legen Sie es:

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

Dann wird Ihr Skript dies ändern nur innerhalb des schließenden </body> Tags.

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

Answer 2

document.write einen String und gibt es als Teil des HTML. Diese ist nicht ein Live-Wert, der Updates, wenn die Variable zeigt auf den String aktualisiert wird.

Dafür werden Sie müssen DOM manipulation ausführen.

Answer 3

ändern JavaScript-Funktion so ähnlich:

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

Und dann im Körper:

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

Answer 4

Wie ich in der Post setzen. Die Verwendung von JQuery würde Ihr Leben für diese Art von Aufgabe (und viele andere für die Angelegenheit) leicht machen. Das wirklich nette an JQuery ist, dass es oft Ihre JavaScript-Syntax viel einfacher macht, als Sie die wesentlichen Details von Javascript lernen können, während Sie gehen. Zuerst müssen Sie die JQuery API

Dann

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

nun das folgende Skript-Tag in Ihre HTML-Seite fügen Sie die Funktion wie folgt umschreiben könnte.

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

Ihre html eher wie dies

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

aussehen würden oder weniger, die .html() kann sowohl bekommen und die HTML des ausgewählten Elements gesetzt.Also fügen wir einfach den Wert in das div-Tag ein.