Question

我的BMI计算器适用于Chrome，Firefox和Opera，但不适用于IE。当我查看IE调试器时，没有错误。问题是计算器没有显示结果。我知道我的问题与此链接类似 Inline event handler not working in 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＆＃39; F12开发者工具＆＃39;

中看到这一点

考虑是否需要支持IE。该代码适用于Microsoft的当前浏览器Edge。如果您真的想要支持IE，请将箭头功能切换为function(){}

PS。你也可以交换：

parseInt(someString, 10)

与

Number(someString)

使代码更易于阅读。您可能还想为18.5数字和25数字添加常量来表示它们的含义。

Here's a working jsfiddle。但是，除非你有额外的时间或金钱来支持过时的浏览器（作为学习者，你可能不会），我会避免支持它们并保留你当前的代码。

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

1 个答案: