So I’m trying to get the error message to go next to the field, but I have no idea what I’m doing, I’m pretty new at this, sorry to bother you guys.
Here’s the whole code:
function computeBMI() {
var height = 0;
var weight = 0;
height = Number(document.getElementById("height").value);
weight = Number(document.getElementById("weight").value);
if (height == 0 | height > 220) {
document.getElementById('errorMsg').innerHTML = "Use Appropriate Height";
return 0;
}
if (weight == 0 | weight < 20) {
document.getElementById('errorMsg').innerHTML = "Use Appropriate Weight";
return 0;
}
var BMI = weight / (height / 100 * height / 100);
document.getElementById("output").innerText = Math.round(BMI * 100) / 100;
var output = Math.round(BMI * 100) / 100;
if (output < 18.5)
document.getElementById("comment").innerText = "Underweight";
else if (output >= 18.5 && output <= 25)
document.getElementById("comment").innerText = "Normal";
else if (output > 25)
document.getElementById("comment").innerText = "Overweight";
}<html> <head> <title>BMI Calculator</title> </head> <body> <div id="errorMsg"></div> <h1>Body Mass Index Calculator</h1> <p>Enter your height: <input type="text" id="height" /></p> <span id="errorMsg">< <p>Enter your weight: <input type="text" id="weight"/></p> <input type="submit" value="computeBMI" onclick="computeBMI();"> <h1>Your BMI is: <span id="output">?</span></h1> <h2>This means you are: <span id="comment"> ?</span> </h2> </body>
Advertisement
Answer
To do it your way you would need a separate error message area next to each input, and each one would need a unique ID – currently you have two elements whose ID is “errorMsg”, one of which is in the wrong place in the layout. An ID must (by definition) uniquely identify an element, so clearly that isn’t going to work. When you refer to “errorMsg” in your code, JavaScript will just pick the first one it finds and assume you meant that one. It has no way of telling them apart.
But anyway for the validation you’re trying to do, you don’t actually need to write your own code at all. If you put your fields inside a form, and handle the submit event of the form, you can then use HTML5 validation rules on the fields themselves to restrict the allowed input.
Here’s a demo:
Note the addEventListener to handle the “submit” event of the form and run some Javascript.
Note also the <form> and </form> tags round the fields and button, and lastly the type="number", required, min and max attributes on the input fields themselves.
var form = document.getElementById("BMIForm");
form.addEventListener("submit", function(event) {
event.preventDefault(); //stop a postback
computeBMI();
});
function computeBMI() {
var height = 0;
var weight = 0;
height = Number(document.getElementById("height").value);
weight = Number(document.getElementById("weight").value);
var BMI = weight / (height / 100 * height / 100);
document.getElementById("output").innerText = Math.round(BMI * 100) / 100;
var output = Math.round(BMI * 100) / 100;
if (output < 18.5)
document.getElementById("comment").innerText = "Underweight";
else if (output >= 18.5 && output <= 25)
document.getElementById("comment").innerText = "Normal";
else if (output > 25)
document.getElementById("comment").innerText = "Overweight";
}<html> <head> <title>BMI Calculator</title> </head> <body> <h1>Body Mass Index Calculator</h1> <form id="BMIForm"> <p>Enter your height: <input type="number" required min="0" max="220" id="height" /></p> <p>Enter your weight: <input type="number" required min="0" max="20" id="weight"/></p> <input type="submit" value="computeBMI"> </form> <h1>Your BMI is: <span id="output">?</span></h1> <h2>This means you are: <span id="comment"> ?</span> </h2> </body>
You can learn more about HTML form validation here: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation