CODEWITHSUNDEEP
javascripthtml
danielm
danielm

Reputation: 19

Why doesn't this work? I think it's a conversion issue

I'm a scripting newbie who's been doing the JavaScript exercises at Codecademy for a little while now and a chance came up at work to challenge myself by building a really simple app (HTML and JavaScript)that allows someone to calculate the number of calories they can consume on a daily basis while meeting their weight loss objectives.

I've got it almost there. I had a working version (thanks to some help) that asked in the form for people to give their height in inches. The last change I wanted to make was to add the ability for them to enter their height in standard format (feet and inches) and have the app convert it in the equation. That's where the trouble started. I added a second field and renamed the variables where needed to create the conversion, but what happened is strange.

It calculates properly when something is entered into the "feet" field, but if you also add something into the "inches" field on the form, it returns results that are more than 4 times as high as they should be.

I tried moving the conversion down into the gender functions, but it made no difference. I haven't changed anything else about the code that was formerly working, so I think the issue has to be in the inches variable or in the inches form element or in the height variable where they are combined. The latter seems most likely to me, but I can't seem to find the problem.

It's probably obvious to those of you who know what you're doing so if you could take a few seconds, you'd be helping someone make the first real-world use app of their lives.

Side Note: When I open it in my browser(Chrome), the first time I fill it out, the the answer flashes and disappears. After that, each time it pulls up the answer correctly on the screen. I'm not sure if this is some mistake I've made or a browser issue or what.

<html>
<head>
<title>Daily Calorie Max</title>

</head>
<body>

<script type="text/javascript" language="javascript">

function Calculate() {

    var gender = document.getElementById("gender").value;
    var weight = document.getElementById("weight").value;
    var inches = document.getElementById("inches").value;
    var height = (document.getElementById("feet").value * 12) + inches;
    var age = document.getElementById("age").value;
    var goal = document.getElementById("goal").value;


    if(gender=="male") 
        {
            val1 = 6.23 * weight;
            val2 = 12.7 * height;
            val3 = 6.8 * age;
            dailyDeficit = (goal * 3500) / 90;

            result = 66 + val1 + val2 - val3;

            cals = result * 1.55;
            calMax = cals - dailyDeficit;

        }
    else if (gender=="female")
        {
            val1 = 6.23 * weight;
            val2 = 4.7 * height;
            val3 = 4.7 * age;
            dailyDeficit = (goal * 3500) / 90;

            result = 655 + val1 + val2 - val3;

            cals = result * 1.55;
            calMax = cals - dailyDeficit;
        }


document.getElementById("answer").textContent = 'Your Daily Calorie Max is: ' + calMax.toFixed(0); 

}




</script>

<form action="#">
    Gender  : <select id="gender"><option value="male">Male</option><option value="female">Female</option></select><br />
    Weight  : <input type="text" id="weight" />lbs.<br />
    Height  : <input type="text" id="feet" />ft. <input type="text" id="inches" />in.<br />
    Age     : <input type="text" id="age" /><br />
    Goal    : <select id="goal"><option value=5>Lose 5 Pounds</option><option value=10>Lose 10 Pounds</option><option value=15>Lose 15 Pounds</option><option value=20>Lose 20 Pounds</option><option value=25>Lose 25 Pounds</option></select><br />


    </fieldset>
    <input type="submit" value="Give me my Daily Calorie Max!" onclick="Calculate()" />
</form>
<div id="answer"></div>

</body>
</html>

Upvotes: 2

Views: 91

Answers (3)

Shabab
Shabab

Reputation: 249

I've been playing with your code on JSFiddle but could not make it change. I've used parseInt() as necessary and changed the submit button to a regular button. One major change I want to note is I used innerHTML instead of textContent. I believe that this is the correct form for writing to <div>.

I still can't get your code to spit out an answer. Take a stab at it and see if I'm misinterpreting your code.

P.S. Please also keep your code in the <head> and not in the body.

Upvotes: 0

Oded
Oded

Reputation: 499002

The problem is here:

var inches = document.getElementById("inches").value;
var height = (document.getElementById("feet").value * 12) + inches;

You are ending up concatenating the result of the calculation for feet with the string for inches (several type coercions are occurring here - from the value of the feet element to an integer for multiplication, then from the resulting integer to a string for concatenation with the inches string).

You should use the correct types for these:

var inches = parseInt(document.getElementById("inches").value, 10);
var height = (parseInt(document.getElementById("feet").value, 10) * 12) + inches;

I also suggest using parseFloat for the float types.

This is a result of type coercion in JavaScript.

The + operator can be used to add two numbers together, but it will also concatenate strings (even if those strings contain only number values). If you try to + a string and a number, you get a string.

For example...

var resultOfAdd = 34 + 12; // resultOfAdd equals 46
var resultOfAdd = "34" + "12"; // resultOfAdd equals  "3412" ("34" and "12" are strings)
var resultOfAdd = "34" + 12; // resultOfAdd equals "3412" (12 gets coerced into a string)
var resultOfAdd = parseInt("34") + 12; // resultOfAdd equals 46!

It is very important to understand the difference between a string that contains numbers (e.g. "42") and a number (e.g. 42) in JavaScript. They are two different things.

Upvotes: 3

sagioto
sagioto

Reputation: 261

the value() you are getting is a string, you should use parseInt()

Upvotes: 0

Related Questions