CODEWITHSUNDEEP
javascript
cezanne
cezanne

Reputation: 43

Why can't I get the value of the radio button?

After selecting male or female,I would press the click button so that I could get the selected one. And, if I press the click button without selecting anything, an error message is output.

If I select a man and press the click button, I get an error message even though I can get the man's value. For woman it works fine. Why doesn't it work for man?

var btn_err = document.getElementById("btn_error");
    btn_err.style.color = "red"; 

var btn = document.getElementById('btn');
 
    btn.addEventListener('click', function() {

      let humanRadio = document.getElementsByName('human');

      let humanValue = '';
  
        for (let i = 0; i < humanRadio.length; i++){
          if (humanRadio[i].checked){

            humanValue = humanRadio[i].value;
            console.log(humanValue);
            btn_err.innerHTML = "";
          }
          
          else{
     
            
            btn_err.innerHTML = "please fill in the value";
          
          }
     
        console.log('selected ' + humanValue );
      }
});

Upvotes: 0

Views: 71

Answers (3)

moritz4004
moritz4004

Reputation: 26

Hello just try it with the query selector. It is much less Code.

var btn_err = document.getElementById("btn_error");
btn_err.style.color = "red";

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {

  let humanRadio = document.querySelector('input[name=human]:checked')

  //humanRadio.value contains the value, if one the the options was selected
  btn_err.innerHTML = humanRadio != null ? humanRadio.value : 'Not Found';
  
});

Upvotes: 0

DecPK
DecPK

Reputation: 25398

Alternatively, you can filter out the input that is checked and if there is no checked input then its length will be 0 then you can print the error.

var btn_err = document.getElementById("btn_error");
btn_err.style.color = "red";
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  let humanRadio = document.getElementsByName('human');
  let humanValue = '';
  const checkedInput = [...humanRadio].filter(r => r.checked);
  if (checkedInput.length) {
    humanValue = checkedInput[0].value;
    btn_err.innerHTML = "";
  } else {
    btn_err.innerHTML = "please fill in the value";
  }
  console.log('selected ' + humanValue);
});
<table>
  <tr>
    <td></td>
    <td></td>
    <td>
      <input type="radio" name="human" value="man">man
      <input type="radio" name="human" value="woman">woman

    </td>
    <td></td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td id="btn_error"></td>
    <td></td>
  </tr>




  <tr>
    <td></td>
    <td></td>
    <td align="right"><input type="button" value="click" id="btn"></td>
    <td></td>

  </tr>
</table>

Upvotes: 0

Atzuki
Atzuki

Reputation: 867

That's because you are running the for loop even you checked its a man. If the i = 1 and humanRadio[i] is checked, the loop will continue, so when i = 2 it jumps to else.

btn.addEventListener('click', function () {
  let humanRadio = document.getElementsByName('human');

  let humanValue = '';

  for (let i = 0; i < humanRadio.length; i++) {
    console.log(humanRadio[i].checked);
    if (humanRadio[i].checked) {
      humanValue = humanRadio[i].value;
      console.log(humanValue);
      btn_err.innerHTML = '';
      break; //When using break, the loop will be quitted
    } else {
      btn_err.innerHTML = 'please fill in the value';
    }

    console.log('selected ' + humanValue);
  }
});

Hope you understood.

Upvotes: 1

Related Questions