Javascript BMI calculator doesn't work in IE

Question

My BMI calculator works in Chrome, Firefox and Opera but not in IE. When I look at the IE Debugger, there are no errors. The problem is that the calculator doesn't show the result. I'm aware that my question is similar to this link Inline event handler not working in JSFiddle however, I can't understand the solution in relation to my problem.

Here is the javascript:

const form = document.querySelector('form[name=bmi]');  
const onSubmit = event => {

event.preventDefault();
let healthMessage;

const result = form.querySelector('.result');
const health = form.querySelector('.health');

const weight = parseInt(form.querySelector('input[name=weight]').value, 10);
const height = parseInt(form.querySelector('input[name=height]').value, 10);    
const bmi = (weight / (height /100 * height / 100)).toFixed(1);

if (bmi < 18.5) {
  healthMessage = 'undervægtig';
} else if (bmi > 18.5 && bmi < 25) {
  healthMessage = 'normal vægtig';
} else if (bmi > 25) {
  healthMessage = 'overvægtig';
}
result.innerHTML = bmi;
health.innerHTML = healthMessage;
};  
form.addEventListener('submit', onSubmit, false);

Here is the HTML:

<form name="bmi">
<h1>Mål dit BMI:</h1>
<label>
<input type="text" name="weight" id="weight" placeholder="Vægt (kg)">
<input type="text" name="height" id="height" placeholder="Højde (cm)">
<input type="submit" name="submit" id="submit" value="Udregn BMI">
</label>
<div class="calculation">
<div>
  Dit BMI er: <span class="result"></span>
</div>
<div>
  Dette betyder at du er: <span class="health"></span>
</div>
</div>
</form>

And here is a fiddle: https://jsfiddle.net/1nd7oot5/

developer tools console will show you the errors in your code - internet exploder definitely does not understand arrow function notation - as for let/const ... dunno ... `When I look at the IE Debugger, there are no errors` you're not doing it right then, there are errors aplenty — Jaromanda X, Jun 13 '17 at 13:20
Make sure your version of IE supports the "const" and "let" keywords. — niorad, Jun 13 '17 at 13:23
**SCRIPT1002: Syntax error** next line is **_display (46,28)** - which points to `=>` in `const onSubmit = event => {` - opening the developer tools console too late wont show the error, click run in the fiddle — Jaromanda X, Jun 13 '17 at 13:23
@Y.K there's a working version for IE11 included in the updated fiddle in my answer. Though you probably don't want to support IE11. — mikemaccana, Jun 13 '17 at 13:36
The arrow has been changed to function(event), however the BMI calculator still doesn't work in IE. — , Jun 13 '17 at 13:55

mikemaccana · Accepted Answer · 2017-06-13T13:30:53.490

0

IE is too old to handle arrow functions =>, from JavaScript's ES2015 edition. You can see this from the IE 'F12 Developer Tools'.

Consider whether you need to support IE at all. The code works in Microsoft's current browser, Edge. If you really want to support IE, switch the arrow function out for function(){}

PS. You can also swap:

parseInt(someString, 10)

with

Number(someString)

To make the code easier to read. You might also wan to add constants for the 18.5 number and the 25 number to indicate what they mean.

Here's a working jsfiddle. However unless you have the extra time or money to support out of date browsers (which, as a learner, you probably don't) I would avoid supporting them and keep your current code.

edited Jun 13 '17 at 13:30

answered Jun 13 '17 at 13:24

mikemaccana

110,530
99
389
494

that would be a great answer - except IE11 **does** support it - it's the arrow function that breaks IE11 :p – Jaromanda X Jun 13 '17 at 13:26
I would've kept the `let/const` thing in the answer because they too would be a problem with older internet exploder versions – Jaromanda X Jun 13 '17 at 13:29
@JaromandaX yep a lot of things won't work in older browsers. However I'd added advice to dump support for them entirely as the question asker is a beginner and likely nobody is paying them to support out of date browsers. – mikemaccana Jun 13 '17 at 13:35
Your fiddle solution doesn't work in Chrome or Firefox. – Jun 13 '17 at 13:42
Thanks @Y.K. The parseInt() change isn't necessary but it will make your code better. If the answer helped can you upvote it? – mikemaccana Jun 14 '17 at 12:27

Javascript BMI calculator doesn't work in IE

1 Answers1