Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Placing the correct variable in a div

I am building a BMI-calculator, (you put your height and weight and it calculates it) but I am having an issue where an if statement only outputs an error message variable to the div, but won’t output the correct one, even when there are the correct inputs.

I have attempted checking if the variables in the if statement are empty instead of checking for valid input.
Outputting the correct variable itself outside of the if statement works fine, only the if statement has an issue.
The console shows no problems.

let output = 'Your BMI is ' + shortened + '.';
let corrNum = 'Put correct numbers.';

if( weight !== '' && height !== '') {
    document.getElementById("outputField").innerHTML = output;
} else {
    document.getElementById("outputField").innerHTML = corrNum;
}

If there is inputs in both inputboxes, it should output ‘output’.
If one or both inputs are missing, it should output ‘corrNum’.

I would really appreciate any help.

Tags:

2

Answers


  1. 0

    Agree with the first commenter; you need to ensure that you are getting your inputs correctly.
    Assuming you have two text boxes, one for height and one for weight:

    var height = $('#heightTextBox').val();
var weight = $('#weightTextBox').val();

    Then you would have your code to check the values and display the messages. Please note that this is using jQuery to pull these values; there is no indication of what frameworks you are using.

    Login or Signup to reply.
  2. 0

    You can use the built-in validation provided by the form to enforce the requiredness of the fields.

    const results = document.querySelector('#results');

document.forms['bmi-calc'].addEventListener('submit', onSubmit);

function onSubmit(event) {
  event.preventDefault(); // Prevent redirect
  const form = event.target;
  const weight = form.elements.weight.valueAsNumber;
  const height = form.elements.height.valueAsNumber;
  const bmi = weight / (height ** 2);
  results.textContent = `Your BMI is ${bmi.toFixed(2)} (${getCategory(bmi)})`;
};

function getCategory(bmi) {
  switch (true) {
    case bmi <= 18.5: return "Underweight";
    case bmi <= 25.0: return "Normal";
    case bmi <= 30.0: return "Overweight";
    default: return "Obese";
  }
}
    html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.5rem;
}

.grid-form *:last-child {
  grid-column: 1 / 3;
}

hr {
  width: 90%;
}
    <h2>BMI Calculator</h2>
<form name="bmi-calc" class="grid-form">
  <label for="weight-input" aria-label="Weight in kilograms">
    Weight (kg)
  </label>
  <input type="number" id="weight-input" name="weight"
      placeholder="Weight in kilograms" value="90" required>
  <label for="height-input" aria-label="Height in meters">
    Height (m)
  </label>
  <input type="number" id="height-input" name="height"
      placeholder="Height in meters" value="2.0" required>
  <button type="submit">Calculate</button>
</form>
<hr>
<div id="results"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search