Javascript BMI計算器在IE中不起作用

Question

我的BMI計算器可以在Chrome，Firefox和Opera中使用，但不能在IE中使用。 當我查看IE調試器時，沒有錯誤。 問題是計算器不顯示結果。 我知道我的問題類似於此鏈接Inline事件處理程序無法在JSFiddle中運行，但是，我無法理解與我的問題有關的解決方案。

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

這是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>

這是一個小提琴： https : //jsfiddle.net/1nd7oot5/

Answer 1

IE太老了，無法處理JavaScript ES2015版本中的箭頭函數=> 。 您可以從IE“ F12開發人員工具”中看到這一點。

考慮是否需要支持IE。 該代碼可在Microsoft當前的瀏覽器Edge中運行。 如果您確實要支持IE，請將箭頭功能切換為function(){}

PS。 您還可以交換：

parseInt(someString, 10)

與

Number(someString)

使代碼更易於閱讀。 您可能還想為18.5和25的數字添加常量，以表明它們的含義。

這是一個工作的jsfiddle 。 但是，除非您有額外的時間或金錢來支持過時的瀏覽器（作為學習者，您可能不知道），否則我將避免支持它們並保留您的當前代碼。