Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Question

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Hey there, I'm currently working on a beginner project and could use some assistance. My project involves creating a basic BMI calculator using metric units, but I seem to be encountering issues with rounding numbers. Here is a snippet of my code:

var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;

function calculationFunction() {
    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight / Math.pow(height,2);
    result.innerText = Math.round(BMI*100)/100;

    if (BMI < 18.5) {
        statement.innerText = "Underweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
    } else if ((BMI > 18.5) && (BMI < 24.9)) {
        statement.innerText = "Normal weight";
        document.getElementById('result-color').style.backgroundColor="green";
    } else if ((BMI > 25) && (BMI < 29.9)) {
        statement.innerText = "Overweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
    } else {
        statement.innerText = "Obesity";
        document.getElementById('result-color').style.backgroundColor="red";
    }
}

calculateButton.addEventListener("click", calculationFunction);



/*
BMI Categories:
Underweight = <18.5
Normal weight = 18.5–24.9
Overweight = 25–29.9
Obesity = BMI of 30 or greater
*/

When I run the code, the result shows as 0: actual "app"

If you can offer any guidance, it would be greatly appreciated. Thanks!

javascript

Answer 1

Answer №1

Your calculation of BMI is currently set up for kilograms and meters, resulting in a very low value that gets rounded down to zero using the Math.round function.

If you prefer to work with centimeters instead of meters, simply adjust your formula as follows:

BMI = weight (kg) / height (cm) / height (cm) * 10000

To implement this change in code, update your BMI calculation line to:

BMI = weight / height / height * 10000

Answer 2

Your calculation of BMI is currently set up for kilograms and meters, resulting in a very low value that gets rounded down to zero using the Math.round function.

If you prefer to work with centimeters instead of meters, simply adjust your formula as follows:

BMI = weight (kg) / height (cm) / height (cm) * 10000

To implement this change in code, update your BMI calculation line to:

BMI = weight / height / height * 10000

Answer 3

Answer №2

The method used to calculate the BMI might need some adjustments, but what stands out more are areas where the code could be improved for better readability, understanding, and reusability.

There is a flaw in your code that incorrectly labels individuals with a BMI of 18.5 or between 24.9 and 25 as "obese". This error stems from how you assess the BMI variable against range intervals.
If BMI is not less than 18.5 (the first if statement), then automatically it is greater than or equal to 18.5; there's no need to check if it is greater than specifically 18.5. Similarly, if the second if condition doesn't match, it implies that BMI is equal to or greater than 24.9, rendering your third check ineffective in capturing values like 24.95 which fall within the overlooked range.

When comparing a value against interval limits, focus on just one boundary per interval:

if (BMI < 18.5) {
  ...
} else if (BMI < 24.9) {           
  ...
} else if (BMI < 29.9) {           
  ...
} else {                           
  ...
}

The function calculateFunction() relies on global variables (heightInput, weightInput, result, statement) making it tricky to ascertain the values involved in its computations. Moreover, it carries out document changes which remain concealed during function usage checks.

Addtionally, the function name lacks clarity regarding its purpose. Including "function" in the function title serves no informative value; instead, opt for a clearer descriptor like calculateBMI().

Restrict the function to BMI computation only, moving other tasks (collecting input data, displaying BMI results) to a separate function:

// Function for BMI calculation
function calculateBMI(height, weight) {
  // Implement correct formula here
  return weight / Math.pow(height, 2);
}

// Function for determining description and color based on BMI
function getBMIDescription(BMI) {
  // Calculate text and color based on BMI value
  if (BMI < 18.5) {
    return { description: 'Underweight', color: 'yellow' };
  } else if (BMI < 24.9) {
    return { description: 'Normal weight', color: 'green' };
  } else if (BMI < 29.9) {
    return { description: 'Overweight', color: 'yellow' };
  } else {
    return { description: 'Obesity', color: 'red' };
  }
}

// Function for interacting with the document
function computeBMIandDisplay(doc) {
  // Pass page document as an argument for clarity

  // Gather input data
  let height = doc.querySelector('.height-input-field').value;
  let weight = doc.querySelector('.weight-input-field').value;

  // Compute BMI and determine description and color
  let BMI = calculateBMI(height, weight);
  let { description, color } = getBMIDescription(BMI);

  // Display values on screen
  doc.querySelector('.result').innerText = BMI.toFixed(2);

  // Show description and associated color
  doc.querySelector('.result-statement').innerText = description;
  doc.getElementById('result-color').style.backgroundColor = color;
}


// Button click handler installation
document.querySelector('.calculate').addEventListener('click', () => computeBMIandDisplay(document));

Answer 4

The method used to calculate the BMI might need some adjustments, but what stands out more are areas where the code could be improved for better readability, understanding, and reusability.

There is a flaw in your code that incorrectly labels individuals with a BMI of 18.5 or between 24.9 and 25 as "obese". This error stems from how you assess the BMI variable against range intervals.
If BMI is not less than 18.5 (the first if statement), then automatically it is greater than or equal to 18.5; there's no need to check if it is greater than specifically 18.5. Similarly, if the second if condition doesn't match, it implies that BMI is equal to or greater than 24.9, rendering your third check ineffective in capturing values like 24.95 which fall within the overlooked range.

When comparing a value against interval limits, focus on just one boundary per interval:

if (BMI < 18.5) {
  ...
} else if (BMI < 24.9) {           
  ...
} else if (BMI < 29.9) {           
  ...
} else {                           
  ...
}

The function calculateFunction() relies on global variables (heightInput, weightInput, result, statement) making it tricky to ascertain the values involved in its computations. Moreover, it carries out document changes which remain concealed during function usage checks.

Addtionally, the function name lacks clarity regarding its purpose. Including "function" in the function title serves no informative value; instead, opt for a clearer descriptor like calculateBMI().

Restrict the function to BMI computation only, moving other tasks (collecting input data, displaying BMI results) to a separate function:

// Function for BMI calculation
function calculateBMI(height, weight) {
  // Implement correct formula here
  return weight / Math.pow(height, 2);
}

// Function for determining description and color based on BMI
function getBMIDescription(BMI) {
  // Calculate text and color based on BMI value
  if (BMI < 18.5) {
    return { description: 'Underweight', color: 'yellow' };
  } else if (BMI < 24.9) {
    return { description: 'Normal weight', color: 'green' };
  } else if (BMI < 29.9) {
    return { description: 'Overweight', color: 'yellow' };
  } else {
    return { description: 'Obesity', color: 'red' };
  }
}

// Function for interacting with the document
function computeBMIandDisplay(doc) {
  // Pass page document as an argument for clarity

  // Gather input data
  let height = doc.querySelector('.height-input-field').value;
  let weight = doc.querySelector('.weight-input-field').value;

  // Compute BMI and determine description and color
  let BMI = calculateBMI(height, weight);
  let { description, color } = getBMIDescription(BMI);

  // Display values on screen
  doc.querySelector('.result').innerText = BMI.toFixed(2);

  // Show description and associated color
  doc.querySelector('.result-statement').innerText = description;
  doc.getElementById('result-color').style.backgroundColor = color;
}


// Button click handler installation
document.querySelector('.calculate').addEventListener('click', () => computeBMIandDisplay(document));

Answer 5

Answer №3

Thank you for the advice, I appreciate it. After reviewing my mistakes, I have made some improvements to my code:

var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;

function performCalculation() {
    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight / height / height * 10000;
    result.innerText = Math.round(BMI*100)/100;

    if (BMI < 18.5) {
        statement.innerText = "Underweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
        document.getElementById('result-color').style.color="black";
    } else if ((BMI > 18.5) && (BMI < 24.9)) {
        statement.innerText = "Normal weight";
        document.getElementById('result-color').style.backgroundColor="green";
        document.getElementById('result-color').style.color="white";
    } else if ((BMI > 25) && (BMI < 29.9)) {
        statement.innerText = "Overweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
        document.getElementById('result-color').style.color="black";
    } else {
        statement.innerText = "Obesity";
        document.getElementById('result-color').style.backgroundColor="red";
        document.getElementById('result-color').style.color="white";
    }
}

calculateButton.addEventListener("click", performCalculation);

You can check out the updated calculator here

Answer 6

Thank you for the advice, I appreciate it. After reviewing my mistakes, I have made some improvements to my code:

var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;

function performCalculation() {
    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight / height / height * 10000;
    result.innerText = Math.round(BMI*100)/100;

    if (BMI < 18.5) {
        statement.innerText = "Underweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
        document.getElementById('result-color').style.color="black";
    } else if ((BMI > 18.5) && (BMI < 24.9)) {
        statement.innerText = "Normal weight";
        document.getElementById('result-color').style.backgroundColor="green";
        document.getElementById('result-color').style.color="white";
    } else if ((BMI > 25) && (BMI < 29.9)) {
        statement.innerText = "Overweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
        document.getElementById('result-color').style.color="black";
    } else {
        statement.innerText = "Obesity";
        document.getElementById('result-color').style.backgroundColor="red";
        document.getElementById('result-color').style.color="white";
    }
}

calculateButton.addEventListener("click", performCalculation);

You can check out the updated calculator here

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Answer №1

Answer №2

Answer №3

Similar questions

RouterContext Error: Invariant violation: Do not utilize <withRouter(App) /> in a context without a <Router> present

Mastering the A-Frame Game Loop: Tips for Separating Logic and Rendering

Guide to implementing server-side data loading in App.js using Next.js

Internet Explorer's support for the `<summary>` tag in HTML

Create data structures in python, php, c#, go, c++, and java using a JavaScript/JSON object

What is the most effective method for the server to communicate with a web client through message delivery?

Updating file extension name in ReactJS: A quick guide

Error encountered during Jest snapshot testing: Attempting to destructure a non-iterable object which is invalid

Using jQuery to iterate through a JSON array and extract key/value pairs in a loop

Struggling to send information to the data layer on every page in Angular 9

Utilizing Angular's File Upload feature with Glyphicon icons

One click wonder: Easily print any webpage content with just the click of a button!

Uploading a CSV file in JSON format to Amazon S3 with Node.js

Using JavaScript to assign function arguments based on arbitrary object values

Is it possible to expand the CORS permissions to the routers directly from the app?

Eliminate elements from an array using a specific key for filtering

What are the steps to import a .obj 3D model into Three.js?

Guide to resetting a CSS animation with pure JavaScript

Does anyone know of a JavaScript function that works similarly to clientX and clientY but for tooltips when the mouse moves?

trigger the focusout event within the focusin event