Radiobuttons und Javascript, falsche Ausgabe

Question

unten ist der Code für meine Radio-Buttons,

<label class="radio-inline"> 
<input type="radio" name="optradio" id="radio_north autocomplete='off'>North 
</label> 
<label class="radio-inline"> 
<input type="radio" name="optradio" id="radio_south" autocomplete='off'>South 
</label> 
<label class="radio-inline"> 
<input type="radio" name="optradio" id="radio_east" autocomplete='off'>East 
</label> 

und unten ist mein Javascript,

var form = document.getElementById("info_form"); 
alert(form.elements["radio_north"].value); 

aber ich habe 'auf' auf der Hut, statt Norden, Süden oder Osten. Ich habe mein Bestes versucht, kann aber den Grund nicht herausfinden.

Answer 1

Ihre HTML-Elemente haben keine value Attribut gesetzt, so können Sie Norden nicht .value

Wenn Sie versuchen, bekommen Norden von der übergeordneten Label-Tag bekommen verwenden, können Sie es auf diese Weise zugreifen können:

JS

var form = document.getElementById("info_form"); 
console.log(form.querySelector("#radio_north").parentNode.innerText); 

HTML (beachten Sie, dass eine fehlende " in Ihrem qu war estion)

<form id="info_form"> 
    <label class="radio-inline"> 
     <input type="radio" name="optradio" id="radio_north" value="north" autocomplete='off'>North 
    </label> 
    <label class="radio-inline"> 
     <input type="radio" name="optradio" id="radio_south" autocomplete='off'>South 
    </label> 
    <label class="radio-inline"> 
     <input type="radio" name="optradio" id="radio_east" autocomplete='off'>East 
    </label> 
</form> 

JS Fiddle Beispiel

https://jsfiddle.net/csqgq1qh/

Hoffnung, das hilft!

EDIT

Wenn Sie den Wert des Radios erhalten müssen, müssen Sie zunächst ein value Attribut zuweisen. Sobald Sie das haben, können Sie den Wert des geprüften Radios mit ein wenig JavaScript abrufen.

HTML

<form id="info_form"> 
    <label class="radio-inline"> 
     <input type="radio" name="optradio" id="radio_north" value="north" checked autocomplete='off'>North 
    </label> 
    <label class="radio-inline"> 
     <input type="radio" name="optradio" id="radio_south" value="south" autocomplete='off'>South 
    </label> 
    <label class="radio-inline"> 
     <input type="radio" name="optradio" id="radio_east" value="east" autocomplete='off'>East 
    </label> 
</form> 
<button id="clicker">Get Value</button> 

JS

var form = document.getElementById("info_form"); 
console.log(form.querySelector("input[name='optradio']:checked").value); 

/* use an event listener to alert the value when the button is clicked */ 
document.querySelector("#clicker").addEventListener('click', function() { alert(form.querySelector("input[name='optradio']:checked").value); }) 

Aktualisiert JSFiddle

https://jsfiddle.net/csqgq1qh/2/