How do I add the error message for BMI calculator fields next/under them instead of on the top of the page?

user_14966661 0
Viewed 74

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>

field css html javascript
2 Answers

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

user_59470430

You tried to use an element's ID, but you can only select one element using ID. You have to use class, and then select which element in the satisfying list of elements contain the class you want.

Also, I updated your code a little bit so instead of validating if the answer fits in an anti-category, it checks if it does not fit in a specified category. 

function computeBMI() {
  document.getElementsByClassName('errorMsg')[0].innerHTML = ""
  document.getElementsByClassName('errorMsg')[1].innerHTML = ""
  var height = parseInt(document.getElementById("height").value);
  var weight = parseInt(document.getElementById("weight").value);
  var returnVal = false
  if (!(height > 0 && height <= 220)) {
    document.getElementsByClassName('errorMsg')[0].innerHTML = "Use Appropriate Height";
    returnVal = returnVal || true
  }
  if (!(weight > 0 && weight < 20)) {
    document.getElementsByClassName('errorMsg')[1].innerHTML = "Use Appropriate Weight";
    returnVal = returnVal || true
  }
  if (returnVal) {
    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>
  <h1>Body Mass Index Calculator</h1>
  Enter your height:
  <input type="text" id="height" placeholder="height" />
  <span class="errorMsg"></span><br> Enter your weight:
  <input type="text" id="weight" placeholder="weight" />
  <span class="errorMsg"></span><br>

  <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>

user_142657490
Related