how can I use if function for radio input to calculate my function?

Question

I want to calculate basal metabolism rate in male and female, we have tow different formula so need to radio checked... in formula I want to calculate but don't know how can identify radio checked box to function.

function bmr(){
 var w3= document.getElementsByName("weight3")[0].value;
 var h3= document.getElementsByName("height3")[0].value;
 var y3= document.getElementsByName("age3")[0].value;
 var sex3= document.getElementsByClassName("sex").checked.value;
 var activity = document.getElementsByName("activity").value;
 if (sex3==="zan"){
 var result3= 655 + (9.6 * w3)+(1.8*h3)-(4.7*y3);
 
 document.getElementById("bmr").innerHTML=" متابولیسم پایه شما = " + Math.round(result3);
 alert (result3);}
 else {
  document.getElementById("bmr").innerHTML=" شما مرد هستید ";
 }
}

<div class="sectionmenu">
   <form action="#" target="_self" method="get">
     <fieldset>
       <legend>برآورد کالری مورد نیاز روزانه</legend>
        وزن (kg)<br>
        <input type="number" name="weight3" placeholder="weight"><br>
        قد (cm)<br>
        <input type="number" name="height3" placeholder="height"><br>
     سن (years)<br>
     <input type="number" name="age3" placeholder="age"><br>
      جنسیت<br>
     <input type="radio" name="female" value="zan" class="sex3">زن
     <input type="radio" name="male" value="mard" class="sex3">مرد<br
     میزان فعالیت<br>
     <select name="activity">
      <option value="little"> سبک</option>
      <option value="almost little"> تقریبا سبک</option>
      <option value="averge"> متوسط</option>
      <option value="hard"> سنگین</option>
      <option value="veryhard"> بسیار سنگین</option>
     </select><br><br>
       <input type="button" value="محاسبه" onClick="bmr()" class="button"><br>
     <p id="bmr">  </p>
     </fieldset>
   </form>
</div>

Hi Mohamad. Can you be more clear about your problem please ? — Maxime Girou, Mar 20 '19 at 08:46
@MaximeGirou Hi Girou, I want to write a calculator for calculate my BMI (basal metabolism rate) in this formula we have to count gender (male or female have difference formula) so in form we need radio input to they checked it. now I want to write an if function for it to if they are female my calculator use first formula and they are male my calculator use second formula... but I don't know how to write my javascript for it. — Mohamad Renjer, Mar 20 '19 at 08:53

score 2 · Accepted Answer · answered Mar 20 '19 at 08:54

Your radio buttons must have the same name so they work together.

Then you can retrieve the value with var sex3= document.querySelector('input[name="sex"]:checked').value; like this:

function bmr(){
 var w3= document.getElementsByName("weight3")[0].value;
 var h3= document.getElementsByName("height3")[0].value;
 var y3= document.getElementsByName("age3")[0].value;
 var sex3= document.querySelector('input[name="sex"]:checked').value;
 var activity = document.getElementsByName("activity")[0].value;
 if (sex3==="zan"){
 var result3= 655 + (9.6 * w3)+(1.8*h3)-(4.7*y3);
 
 document.getElementById("bmr").innerHTML=" متابولیسم پایه شما = " + Math.round(result3);
 alert (result3);}
 else {
  document.getElementById("bmr").innerHTML=" شما مرد هستید ";
 }
}

<div class="sectionmenu">
   <form action="#" target="_self" method="get">
     <fieldset>
       <legend>برآورد کالری مورد نیاز روزانه</legend>
        وزن (kg)<br>
        <input type="number" name="weight3" placeholder="weight"><br>
        قد (cm)<br>
        <input type="number" name="height3" placeholder="height"><br>
     سن (years)<br>
     <input type="number" name="age3" placeholder="age"><br>
      جنسیت<br>
     <input type="radio" name="sex" value="zan" class="sex3">زن
     <input type="radio" name="sex" value="mard" class="sex3">مرد<br
     میزان فعالیت<br>
     <select name="activity">
      <option value="little"> سبک</option>
      <option value="almost little"> تقریبا سبک</option>
      <option value="averge"> متوسط</option>
      <option value="hard"> سنگین</option>
      <option value="veryhard"> بسیار سنگین</option>
     </select><br><br>
       <input type="button" value="محاسبه" onClick="bmr()" class="button"><br>
     <p id="bmr">  </p>
     </fieldset>
   </form>
</div>

Mukyuu · Answer 2 · 2019-03-20T09:46:34.870

You can use: document.querySelector('input[name="sex"]:checked').value;

And change the input:

<input type="radio" name="sex" value="zan">زن
<input type="radio" name="sex" value="mard">مرد<br> <!-- << missing > -->
                 میزان فعالیت<br>

Related: How to get value of selected radio button?, How to allow only one radio button to be checked?

function bmr(){
 var w3= document.getElementsByName("weight3")[0].value;
 var h3= document.getElementsByName("height3")[0].value;
 var y3= document.getElementsByName("age3")[0].value;
 var sex3= document.querySelector('input[name="sex"]:checked').value;
 var activity = document.getElementsByName("activity").value;
 if (sex3==="zan"){
 var result3= 655 + (9.6 * w3)+(1.8*h3)-(4.7*y3);
 
 document.getElementById("bmr").innerHTML=" متابولیسم پایه شما = " + Math.round(result3);
 alert (result3);}
 else {
  document.getElementById("bmr").innerHTML=" شما مرد هستید ";
 }
}

<div class="sectionmenu">
   <form action="#" target="_self" method="get">
     <fieldset>
       <legend>برآورد کالری مورد نیاز روزانه</legend>
        وزن (kg)<br>
        <input type="number" name="weight3" placeholder="weight"><br>
        قد (cm)<br>
        <input type="number" name="height3" placeholder="height"><br>
     سن (years)<br>
     <input type="number" name="age3" placeholder="age"><br>
      جنسیت<br>
     <input type="radio" name="sex" value="zan">زن
     <input type="radio" name="sex" value="mard">مرد<br> <!-- << missing > -->
     میزان فعالیت<br>
     <select name="activity">
      <option value="little"> سبک</option>
      <option value="almost little"> تقریبا سبک</option>
      <option value="averge"> متوسط</option>
      <option value="hard"> سنگین</option>
      <option value="veryhard"> بسیار سنگین</option>
     </select><br><br>
       <input type="button" value="محاسبه" onClick="bmr()" class="button"><br>
     <p id="bmr">  </p>
     </fieldset>
   </form>
</div>

Update:

As OP asked, to make BMR:

function bmr() {
  var w3 = document.getElementsByName("weight3")[0].value;
  var h3 = document.getElementsByName("height3")[0].value;
  var y3 = document.getElementsByName("age3")[0].value;
  var sex3 = document.querySelector('input[name="sex"]:checked').value;
  var activity = document.getElementsByName("activity").value;
  var result3;

  if (sex3 === "zan") {
    result3 = 66.5 + (13.75 * w3) + (5.003 * h3) - (6.755 * y3);
    document.getElementById("bmr").innerHTML = " متابولیسم پایه شما = " + Math.round(result3);
  } else {
    result3 = 655.1 + (9.563 * w3) + (1.850 * h3) - (4.676 * y3);
    document.getElementById("bmr").innerHTML = " شما مرد هستید " + Math.round(result3);;
  }
}

<div class="sectionmenu">
  <form action="#" target="_self" method="get">
    <fieldset>
      <legend>برآورد کالری مورد نیاز روزانه</legend>
      وزن (kg)<br>
      <input type="number" name="weight3" placeholder="weight"><br> قد (cm)<br>
      <input type="number" name="height3" placeholder="height"><br> سن (years)<br>
      <input type="number" name="age3" placeholder="age"><br> جنسیت
      <br>
      <input type="radio" name="sex" value="zan">زن
      <input type="radio" name="sex" value="mard">مرد<br>
      <!-- << missing > -->
      میزان فعالیت<br>
      <select name="activity">
          <option value="little"> سبک</option>
          <option value="almost little"> تقریبا سبک</option>
          <option value="averge"> متوسط</option>
          <option value="hard"> سنگین</option>
          <option value="veryhard"> بسیار سنگین</option>
         </select><br><br>
      <input type="button" value="محاسبه" onClick="bmr()" class="button"><br>
      <p id="bmr"> </p>
    </fieldset>
  </form>
</div>

Glad to help :) you can refer to following [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) to learn more about queryselector. — Mukyuu, Mar 20 '19 at 09:02
hi, excuse me, if I want change activity and calculate intensity of individual activity in my formula, how can i do it? — Mohamad Renjer, Mar 20 '19 at 09:21
@MohamadRenjer Are you referring to this: `var result3= 655 + (9.6 * w3)+(1.8*h3)-(4.7*y3);`? — Mukyuu, Mar 20 '19 at 09:23
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190357/discussion-between-mohamad-renjer-and-mukyuu). — Mohamad Renjer, Mar 20 '19 at 09:50

Kévin Bibollet · Answer 3 · 2019-03-20T08:59:46.897

Use querySelectorAll (or querySelector as you want only one element) with the CSS selector :checked to get the checked radio input.

function get() {
  let checkedRadio = document.querySelectorAll('.myradio:checked')[0];
  console.log(checkedRadio.value);
}

<label>
  One: <input type="radio" class="myradio" name="myradio" value="formula-one" onclick="get()">
</label>

<label>
  Two: <input type="radio" class="myradio" name="myradio" value="formula-two" onclick="get()">
</label>

If you want to keep the usage of getElementsByClassName(), you should transform the returned result with Object.values() and filter it with filter().

function get() {
  let radios = document.getElementsByClassName('myradio');
  
  console.log(Object.values(radios).find((e) => (e.checked)).value);
}

<label>
  One: <input type="radio" class="myradio" name="myradio" value="formula-one" onclick="get()">
</label>

<label>
  Two: <input type="radio" class="myradio" name="myradio" value="formula-two" onclick="get()">
</label>

how can I use if function for radio input to calculate my function?

3 Answers3

Update: