CODEWITHSUNDEEP
javascripthtml
Jason Lemon
Jason Lemon

Reputation: 33

Javascript button not working with function

I can't figure out why this function is not working. Assignment instructions call for the javascript function code to be in it's own javascript file.

Here is the html

<h2>BMI Calculator</h2>

  <form>
     <input type="text" id="weight" value="0" />
     <label for="weight">Weight in pounds</label>
     <input type="text" id="height" value="0" />
     <label for="height">Height in inches</label>
     <input type="text" id="Result" value="0" />
     <label for="Result"> BMI Result </label>
     <input type="submit" id="submit" value="Calculate BMI" />
    </form>

Here is the function based on that form. It's supposed to calculate the bmi. 

function calcBMI() {
    var weight = parseInt(document.getElementByID("weight").value);
    var height = parseInt(document.getElementByID("height").value);
    var result = (weight * 703) / (height * height);
    var textbox = document.getElementById('Result').value;

    textbox.value = result;
}

document.getElementById("submit").addEventListener("click", calcBMI, false);

Upvotes: 0

Views: 187

Answers (5)

Balaraju M
Balaraju M

Reputation: 483

You made a mistake here in weight and heightIt should be in camel case only. document.getElementById("your id") and also why not you check in console what error it shows

Upvotes: 0

Abdoulie Kassama
Abdoulie Kassama

Reputation: 792

Use on click event, change your getElementByID to getElementById and change the type to button and not submit. Submit would post it but what you need is to call the function.

<input type="button" id="submit" value="Calculate BMI" onclick="calcBMI()"/>

In your javascript change

var textbox = document.getElementById('Result').value

To

var textbox = document.getElementById('Result').value = result;

And remove

textbox.value = result;

Upvotes: 0

Ammaro
Ammaro

Reputation: 380

There are few problems with your function:

  1. You have a typo in document.getElementByID, it should be document.getElementById
  2. You have to pass an event object into your function, and invoke preventDefault, so that your form won't be submitted to the server
  3. the line:

var textbox = document.getElementById('Result').value;

it should be 

var textbox = document.getElementById('Result');

So overall, your function should look like:

function calcBMI(e) {
        e.preventDefault();
    var weight = parseInt(document.getElementById("weight").value);
    var height = parseInt(document.getElementById("height").value);
    var result = (weight * 703) / (height * height);
    var textbox = document.getElementById('Result');

    textbox.value = result;
}

Upvotes: 0

Script47
Script47

Reputation: 14530

1.

At a glance it seems as though you are not preventing the default browser behaviour, you need to use event.preventDefault() to prevent the form submitting.

function [...](e) {
    e.preventDefault();
    [...]
}

2.

Ensure you DOM has loaded before manipulation begins by loading the JavaScript below the HTML or you can make use of the DOMContentLoaded event.

3.

A sanity check, ensure that the script has been loaded using the <script></script> tags. If it is an external file, use the src property, if it is just code, wrap it in the aforementioned tags.

4.

You need to change the usage of getElementById you have used getElementByID instead of the lowercase d in Id.

5.

When you are doing textbox.value = result; what you are actually doing is textbox.value.value = result; as you have referenced it as .value originally.

Finally,

Make use of the console as it'll have saved you from asking here as the errors are thrown in them.

Upvotes: 0

Ivan Sivak
Ivan Sivak

Reputation: 7488

3 things:

  1. getElementById must be in camel case. Not with capital D's at the end

  2. Reference to textbox should be just var textbox = document.getElementById('Result') and not with .value at the end.

  3. Button's type should be button otherwise the form is being posted.

Your working example:

function calcBMI() {
    var weight = parseInt(document.getElementById("weight").value);
    var height = parseInt(document.getElementById("height").value);
    var result = (weight * 703) / (height * height);
    var textbox = document.getElementById('Result');
    textbox.value = result;
}

document.getElementById("submit").addEventListener("click", calcBMI, false);
<h2>BMI Calculator</h2>

<form>
  <input type="text" id="weight" value="0" />
  <label for="weight">Weight in pounds</label>
  <input type="text" id="height" value="0" />
  <label for="height">Height in inches</label>
  <input type="text" id="Result" value="0" />
  <label for="Result"> BMI Result </label>
  <input type="button" id="submit" value="Calculate BMI" />
</form>

Upvotes: 3

Related Questions