Why am I getting an NaN error with these functions
Question
I just started learn Javascript about 2 months ago. I came up with this project idea after doing a couple tutorials but now I'm stuck. I keep on getting an error The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\\d+|\\d+.\\d+|.\\d+)([eE][-+]?\\d+)? for these 3 lines.
document.querySelector('.bf').value = Math.round(bodyfat);
document.querySelector('.fat').value = Math.round(fat);
document.querySelector('.lm').value = Math.round(leanMass);
Any assistance is greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
<title></title>
</head>
<body>
<h1>Bodyfat Caculator</h1>
<input type="radio" id="male" name="gender" class="genderM">
<label>Male</label>
<input type="radio" id="female" name="gender" class="genderF">
<label>Female</label>
<div id="male" class="male">
<div>
<label>Weight(lbs)</label><input type="number" name="weight" class="weight"><br>
<label>Height(inches)</label><input type="number" name="height" class="height"><br>
<label>Neck(inches)</label><input type="number" name="neck" class="neck"><br>
<label>Waist(inches)</label><input type="number" name="waist" class="waist">
</div>
<div id="female" class="female">
<div>
<label>Weight(lbs)</label><input type="number" name="weightF" class= "weightF"><br>
<label>Height(inches)</label><input type="number" name="heightF" class="heightF"><br>
<label>Neck(inches)</label><input type="number" name="neckF" class="neckF"><br>
<label>Waist(inches)</label><input type="number" name="waistF" class="waistF"><br>
<label>Hips(inches)</label><input type="number" name="hipsF" class="hipsF">
</div>
<div>
<button type="button" id="calculate" class="calculate">Calculate</button>
</div>
<div>
<label>Bodyfat(%)</label><input type="number" name="bf" class="bf" readonly="readonly"><br>
<label>Lean Mass(lbs)</label><input type="number" name="lm" class = "lm" readonly="readonly"><br>
<label>Fat(lbs)</label ><input type="number" name="fat" class="fat" readonly="readonly"><br>
</div>
</div>
<script src="body.js"></script>
</body>
</html>
````` This is in a separate file````
function result(){
var bodyfat, weight, height, waist, hips, neck;
document.querySelector('.genderM').addEventListener("click", male);
function male() {
weight = parseFloat(document.querySelector('.weight').value);
height = parseFloat(document.querySelector('.height').value);
neck = parseFloat(document.querySelector('.neck').value);
waist = parseFloat(document.querySelector('.waist').value);
bodyfat = 495 / (1.0324 - 0.19077 * Math.log10((waist * 2.54) - (neck * 2.54)) + 0.15456 * Math.log10(height * 2.54)) - 450;
};
document.querySelector('.genderF').addEventListener('click',female);
function female(){
weight = parseFloat(document.querySelector('.weightF').value);
height = parseFloat(document.querySelector('.heightF').value);
neck = parseFloat(document.querySelector('.neckF').value);
waist = parseFloat(document.querySelector('.waistF').value);
hips = parseFloat(document.querySelector('.hipsF').value);
bodyfat = 495 / (1.0324 - 0.19077 * Math.log10((waist * 2.54) - (neck * 2.54)) + 0.15456 * Math.log10(height * 2.54)) - 450;
};
document.querySelector('.calculate').addEventListener('click', result);
document.querySelector('.bf').value = Math.round(bodyfat);
fat = weight * (bodyfat / 100);
document.querySelector('.fat').value = Math.round(fat);
leanMass = weight - fat;
document.querySelector('.lm').value = Math.round(leanMass);
};
result();
1 answers
solution1
0 2020-04-01 00:28:44
The problem is when you call result at the end your variables don't have a value yet like in this line document.querySelector('.bf').value = Math.round(bodyfat); so bodyfat is undefined and that causes Math.round(bodyfat) to throw a NaN.
You should check Chrome DevTools to be able to debug and find this errors.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.