getElementById with Radio Button not working

Question

How to get radio button value in javascript using onChange?

Here's my HTML:

if (document.getElementById('male').checked) {
    document.getElementById('gender2').innerHTML = "Male";
}
    
if (document.getElementById('female').checked) {
    document.getElementById('gender2').innerHTML = "Femmale";
}

<div class="radio">
    <label>
       <input type="radio" name="gender" onChange="(checkGender)" id="male" value="Male">
      Male
    </label>
    <label>
      <input type="radio" name="gender" onChange="(checkGender)" id="female" value="Female">
      Female
    </label>
</div>

<td>Gender</td>
<td><span id="gender2"></span></td>

https://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event — Allan Braga, Apr 27 '18 at 19:26
(1) Wrap your JavaScript code in the `checkGender` function you're trying to refer to. (2) This is not how you invoke a function: `(checkGender)`. This is: `checkGender()`. — David, Apr 27 '18 at 19:27

score 2 · Accepted Answer · answered Apr 27 '18 at 19:27

You need to define an actual function for call back:

function checkGender() {
    if (document.getElementById('male').checked) {
        document.getElementById('gender2').innerHTML = "Male";
    }
    
    if (document.getElementById('female').checked) {
        document.getElementById('gender2').innerHTML = "Femmale";
    }
}

<div class="radio">
    <label>
       <input type="radio" name="gender" onChange="checkGender()" id="male" value="Male">
      Male
    </label>
    <label>
      <input type="radio" name="gender" onChange="checkGender()" id="female" value="Female">
      Female
    </label>
</div>

<td>Gender</td>
<td><span id="gender2"></span></td>

score 1 · Answer 2 · answered Apr 27 '18 at 19:26

Your JavaScript is executed once, when the page loads. You need to call it when something changes (based on an event), and react to the change.

HTML:

<div class="radio">
    <label>
        <input type="radio" name="gender" onclick="checkGender()" id="male" value="Male">
        Male
    </label>
    <label>
        <input type="radio" name="gender" onclick="checkGender()" id="female" value="Female">
        Female
    </label>
</div>

JS:

function checkGender() {
    if (document.getElementById('male').checked) {
        document.getElementById('gender2').innerHTML = "Male";
    }

    if (document.getElementById('female').checked) {
        document.getElementById('gender2').innerHTML = "Femmale";
    }
}

Ori Drori · Answer 3 · 2018-04-27T19:42:58.487

Add an event handler to the container (.radio) using Element.addEventListener(). When the handler is triggered check if the event target is a radio button using Element.matches(). If is is and radio button update the value of the #gender1 div:

var radio = document.querySelector('.radio');
var gender2 = document.getElementById('gender2');

radio.addEventListener('change', function(e) {
  if(!e.target.matches('input[type=radio]')) return;
  
  gender2.innerText = e.target.value;
});

<div class="radio">
  <label>
        <input type="radio" name="gender" value="Male">
        Male
    </label>
  <label>
        <input type="radio" name="gender" value="Female">
        Female
    </label>
</div>

<div id="gender2"></div>

Muhammad Usman · Answer 4 · 2018-04-27T19:38:04.493

You can add an event listener on radio buttons and check for the values.

var radios = document.querySelectorAll('input[type=radio]');

var genderEl = document.getElementById("gender");

for(var i=0; i< radios.length; i++)
{
     radios[i].addEventListener("click", function(){
       genderEl.innerHTML = this.value
     
     })

}

<div class="radio">
    <label>
        <input type="radio" name="gender"   id="male" value="Male">
        Male
    </label>
    <label>
        <input type="radio" name="gender"   id="female" value="Female">
        Female
    </label>
    
    <h3 id="gender"></h3>
</div>

Note: You should always use eventlisteners rather than using inline event handlers. Inline event handlers are evaluated as eval. Moreover, it's a bad practice

getElementById with Radio Button not working

4 Answers4