The .className is not applying the formValidation class on getWeight.length < 1 and getHeight.length < 1. I am stuck trying to figure out why this is happening after reviewing the code extensively.
Any thoughts on what could be causing this issue? Your insights would be greatly appreciated!
Thank you, JS
function calculateBMI() {
let getWeight = document.getElementById('weight').value;
let getHeight = document.getElementById('height').value;
let getBMI = (getWeight / (getHeight*getHeight)).toFixed(2);
let displayBMI = document.getElementById('displaybmi');
if (getWeight.length < 1) {
//alert('Please enter your weight');
getWeight.className = 'formValidation';
}
else if (getHeight.length < 1) {
//alert('Please enter your height');
getHeight.className = 'formValidation';
}
else if(getBMI < 18.5) {
displayBMI.className = 'displaybmi green';
displayBMI.textContent = 'You\'re under weight! ' + getBMI;
}
else if (getBMI >= 18.5 && getBMI <= 25) {
displayBMI.className = 'displaybmi green';
displayBMI.textContent = 'You\'re normal weight! ' + getBMI;
}
else if (getBMI > 25 && getBMI <= 29.99) {
displayBMI.className = 'displaybmi yellow';
displayBMI.textContent = 'You\'re over weight! ' + getBMI;
}
else if (getBMI >= 30 && getBMI <= 34.99) {
displayBMI.className = 'displaybmi orange';
displayBMI.textContent = 'You\'re obese! ' + getBMI;
}
else {
displayBMI.className = 'displaybmi red';
displayBMI.textContent = 'You\'re very obese! ' + getBMI;
}
}
.displaybmi {
font-size: 16px;
padding: 20px;
margin-bottom:20px;
}
.red{
background:red;
}
.yellow {
background: yellow;
}
.green{
background:green;
}
.orange {
background:orange;
}
.formValidation {
border: 2px solid red;
}