I am attempting to calculate BMI and then display additional information on the calculation result when a button is clicked. The 'what does this mean' button should show information based on the calculated BMI score.
const generatebutton = document.getElementById("explainbutton");
const wt = document.getElementById("b2");
const ht = document.getElementById("b3");
const bmi = document.getElementById("b5");
const calc = document.getElementById("b7");
const clr = document.getElementById("b8");
// // BMI calculation function
function calculate() {
const wt = document.getElementById("b2").value;
const ht = document.getElementById("b3").value;
const solve = Number.parseFloat(wt / ht ** 2).toFixed(2);
document.getElementById("b5").textContent = solve;
};
// Function to make 'explain' button visible
function genbutton() {
generatebutton.style.visibility = "visible";
};
calc.addEventListener("click", function() {
calculate();
genbutton();
});
clr.addEventListener("click", function() {
wt.value = "";
ht.value = "";
bmi.textContent = "";
});
// Set variables for explanation
const explain = document.getElementById("explain")
const under = document.getElementById("under")
const healthy = document.getElementById("healthy")
const over = document.getElementById("over")
const obese = document.getElementById("obese")
// Pop-up text
var btn = document.getElementById("explainbutton");
btn.addEventListener("click", function() {
const bmi = document.getElementById("b5");
if (bmi < 18.5) {
explain.classList.toggle("open-under")
} else if (bmi >= 18.5 && bmi < 24.9) {
explain.classList.toggle("open-healthy")
} else if (bmi > 24.9 && bmi < 29.9) {
explain.classList.toggle("open-overweight")
} else {
explain.classList.toggle("open-obese")
}
});#explainbutton {
visibility: hidden;
margin-left: 190px;
}
/* Pop-up explanation options */
.box {
background: white;
visibility: hidden;
margin: 20px auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.open-under .under {
visibility: visible;
width: 300px;
height: 100px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.open-healthy .healthy {
visibility: visible;
width: 300px;
height: 100px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.open-over .over {
visibility: visible;
width: 300px;
height: 100px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.open-obese .obese {
visibility: visible;
width: 300px;
height: 100px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* */<div id="b1">
<span id="sp1">
WEIGHT(kg) :
</span>
<input type="number" id="b2">
</input>
</div>
<br>
<div id="b9">
<span id="sp2">
HEIGHT(m) :
</span>
<input type="number" id="b3">
</input>
</div>
<br>
<div id="bmibox">
BMI :
<span id="b5"> </span>
<INPUT TYPE="BUTTON" VALUE="What does this mean?" class="styled-button-2" id="explainbutton" />
<div class="box" id="explain">
<span class="under" , id="under">You are in the underweight range</span>
<span class="healthy" id="healthy"> You are in the healthy range </span>
<span class="over" id="over"> You are in the overweight range </span>
<span class="obese" id="obese"> You are in the obese range</span>
</div>
</div>
<br>
<br>
<div id="b6">
<INPUT TYPE="BUTTON" VALUE="Calculate" class="styled-button-2" id="b7" />
<button id="b8">Clear</button>
</div>The functionality of the pop-up works correctly without the conditional statement.
Therefore, I am unsure of the reason why the script is not executing. I have attempted isolating the conditional as a separate function before reintegrating it into the EventListener.