Javascript BMI计算器在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/

Answer 1

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.