BMI calculator displays NaN instead of value

Question

I want to make my calculator... in this calculator you input your height, weight and gender after that click on button and my calculator, calculate you BMI.

function cal() {
  var h = document.getElementsByName("height").value; //it's get my height
  var w = document.getElementsByName("weight").value; //it's get my weight
  var r = (w / (h * h)) * 10000; //it's calculate MBI
  document.getElementById("calcu").innerHTML = r; //the answer shows under my form
  alert(r);
}

<form>
  <fieldset>
    <legend>محاسبه BMI</legend>//it's calculate BMI قد (cm)<br>//it's height
    <input type="number" name="height" placeholder="175" value="175"><br> وزن (kg)<br>//it's weight
    <input type="number" name="weight" placeholder="75" value="73"><br> جنسیت
    <br>//it's gender
    <input type="radio" name="female" value="gender">زن//women
    <input type="radio" name="male" value="gender">مرد//man<br><br>
    <input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
    <p id="calcu"></p>
  </fieldset>
</form>

`getElementsByName` returns a collection. It shoud be: `document.getElementsByName("height")[0].value` — adiga, Mar 18 '19 at 07:57
Running the snippet show that it will not work because he needs to parseInt() h & w — Oudmane, Mar 18 '19 at 07:58
Possible duplicate of [Javascript getElementsByName.value not working](https://stackoverflow.com/questions/19834804/javascript-getelementsbyname-value-not-working) and [change value of text using getElementsByName](https://stackoverflow.com/questions/11851682) — adiga, Mar 18 '19 at 07:59
I wrote byId, Byclassname and other getElements but don't work — Mohamad Renjer, Mar 18 '19 at 08:00

score 1 · Answer 1 · answered Mar 18 '19 at 08:01

You need to 1: Select only one element each time, and 2: Convert values to a number:

function cal() {
  var h = parseInt(document.getElementsByName("height")[0].value);
  var w = parseInt(document.getElementsByName("weight")[0].value);
  var r = (w / (h * h)) * 10000; //it's calculate MBI
  document.getElementById("calcu").innerHTML = r; //the answer shows under my form
  alert(r);
}

<form>
  <fieldset>
    <legend>محاسبه BMI</legend>//it's calculate BMI قد (cm)<br>//it's height
    <input type="number" name="height" placeholder="175" value="175"><br> وزن (kg)<br>//it's weight
    <input type="number" name="weight" placeholder="75" value="73"><br> جنسیت
    <br>//it's gender
    <input type="radio" name="female" value="gender">زن//women
    <input type="radio" name="male" value="gender">مرد//man<br><br>
    <input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
    <p id="calcu"></p>
  </fieldset>
</form>

Maheer Ali · Answer 2 · 2019-03-18T08:06:34.267

document.getElementsByName returns a collection of elements and .value is undefined for that. You should access the first element of that using

document.getElementsByName("...")[0].value

And also convert it number using +

function cal(){
 var h= +document.getElementsByName("height")[0].value;//it's get my height
 var w= +document.getElementsByName("weight")[0].value;//it's get my weight
 var r= (w/(h*h))*10000;//it's calculate MBI
 document.getElementById("calcu").innerHTML=r;//the answer shows under my form
 alert(r);
}

<form>
     <fieldset>
       <legend>محاسبه BMI</legend>//it's calculate BMI
        قد (cm)<br>//it's height
        <input type="number" name="height" placeholder="175" value="175"><br>
        وزن (kg)<br>//it's weight
        <input type="number" name="weight" placeholder="75" value="73"><br>
     جنسیت<br>//it's gender
     <input type="radio" name="female" value="gender">زن//women
     <input type="radio" name="male" value="gender">مرد//man<br><br>
        <input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
     <p id="calcu"></p>
     </fieldset>
   </form>

score -1 · Accepted Answer · answered Mar 18 '19 at 08:04

function cal(){
 var h= document.getElementsByName("height")[0].value;
 var w= document.getElementsByName("weight")[0].value;
 var r= (w/(h*h))*10000;
 document.getElementById("calcu").innerHTML=r;
 alert(r);
}

<div class="sectionmenu">
   <form>
     <fieldset>
       <legend>محاسبه BMI</legend>
        قد (cm)<br>
        <input type="number" name="height" placeholder="175" value="175"><br>
        وزن (kg)<br>
        <input type="number" name="weight" placeholder="75" value="73"><br>
     جنسیت<br>
     <input type="radio" name="female" value="gender">زن
     <input type="radio" name="male" value="gender">مرد<br><br>
        <input type="button" value="محاسبه" onClick="cal()"><br>
     <p id="calcu"></p>
     </fieldset>
   </form> 
 
</div>

Why didn't you just mark @jackBashford answer as correct? This is a clear copy — JamesS, Mar 22 '19 at 10:19

BMI calculator displays NaN instead of value

3 Answers3