Javascript button not working with function

Question

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

Your function must appear after define objects... place function just before </body> inside <script> your function </script> — user1844933
– user1844933, Commented Sep 12, 2017 at 16:29
Copy and pasted from assignment specifications... create a function named calcBMI() that performs the calculation using the values in the weight and height text boxes and assign the result to the BMI text box. Convert the value to an Integer number by using the parseInt() function. Reference the text boxes from within the function by using the documentobject.getElementByID(name), and the value attribute of each text box (in other words, don’t use function arguments AKA pass values to the function). Add an event listener to to call the calcBMI() function — Jason Lemon
– Jason Lemon, Commented Sep 12, 2017 at 16:35

Ivan Sivak · Accepted Answer · 2017-09-12 16:30:31Z

3 things:

getElementById must be in camel case. Not with capital D's at the end
Reference to textbox should be just var textbox = document.getElementById('Result') and not with .value at the end.
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>

Script47 · Accepted Answer · 2017-09-12 16:31:09Z

0

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.

edited Sep 12, 2017 at 16:31

answered Sep 12, 2017 at 16:26

Script47

14.6k4 gold badges49 silver badges69 bronze badges

1 Comment

Jason Lemon Over a year ago

I'm totally new to this...how do I check errors in the console?

Ammaro · Accepted Answer · 2017-09-12 16:34:31Z

0

There are few problems with your function:

You have a typo in document.getElementByID, it should be document.getElementById
You have to pass an event object into your function, and invoke preventDefault, so that your form won't be submitted to the server
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;
}

answered Sep 12, 2017 at 16:34

Ammaro

3802 silver badges14 bronze badges

4 Comments

Jason Lemon Over a year ago

Thanks a lot! That does indeed work. however, based on the assignment instructions I do believe that code is above what we have gone over in class. Can you explain what the e.preventDefault(); does? I also noticed you passed an e....calcBMI(e) What was that?

Jason Lemon Over a year ago

To clarify... Copy and pasted from assignment specifications... create a function named calcBMI() that performs the calculation using the values in the weight and height text boxes and assign the result to the BMI text box. Convert the value to an Integer number by using the parseInt() function. Reference the text boxes from within the function by using the documentobject.getElementByID(name), and the value attribute of each text box (in other words, don’t use function arguments AKA pass values to the function). Add an event listener to to call the calcBMI() function

Ammaro Over a year ago

e is a parameter passed by Javascript, it has type 'event' and contains information about the event that happened when you clicked the button 'submit'. PreventDefault is a method that prevent the default action of the button, which is in this case is to submit the form to the server.

Jason Lemon Over a year ago

Thanks a lot! Based on the instructions, was there an easier way to accomplish this?

Abdoulie Kassama · Accepted Answer · 2017-09-12 16:54:18Z

0

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;

edited Sep 12, 2017 at 16:54

answered Sep 12, 2017 at 16:27

Abdoulie Kassama

79011 silver badges20 bronze badges

2 Comments

Script47 Over a year ago

How would this fix the issue?

Abdoulie Kassama Over a year ago

See my updated answer. The type 'submit' was posting the form and that is why the function is not running.

Balaraju M · Accepted Answer · 2017-09-12 16:59:31Z

0

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

answered Sep 12, 2017 at 16:59

Balaraju M

4931 gold badge4 silver badges17 bronze badges

Collectives™ on Stack Overflow

Javascript button not working with function

5 Answers 5

Comments

1.

2.

3.

4.

5.

Finally,

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1.

2.

3.

4.

5.

Finally,

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related