JavaScript。每日能量计算器，IE/Safari 错误，但 Chrome/Firefox 运行

Question

我已经为网络应用程序编写了此脚本，但计算器在 Chrome 和 Firefox 中可以使用，而在 IE/Edge 或 Safari 中不起作用。知道为什么会这样，我该如何处理？谢谢

//----------- Calculate Minimum Daily Energy Requirement ------------- */

  function calculateMDE() {
    var weight = document.mdeForm.weight.value;
    var height = document.mdeForm.height.value;
    var age = document.mdeForm.age.value;
    var sex = document.mdeForm.sex.value;
    var activity = document.mdeForm.activity.value;
    if (weight > 0 && height > 0 && age > 0 && sex === "female") {
        var finalBmr = 655 + (9.6 * weight) + (1.8 * height) - (4.7 * age);
        } 
    else if (weight > 0 && height > 0 && age > 0 && sex === "male") {
        var finalBmr = 66 + (13.7 * weight) + (5 * height) - (6.8 * age);
        }
        if (activity === "sedentary") {
            document.mdeForm.meaning.value = Math.round(finalBmr * 1.2);
            }
        else if (activity === "light") {
            document.mdeForm.meaning.value = Math.round(finalBmr * 1.375);
            }
        else if (activity === "moderate") {
            document.mdeForm.meaning.value = Math.round(finalBmr * 1.55);
            }
        else if (activity === "very") {
            document.mdeForm.meaning.value = Math.round(finalBmr * 1.725);
            }
        else if (activity === "extra") {
            document.mdeForm.meaning.value = Math.round(finalBmr * 1.9);
            }
        else {
            alert("There Was a Problem! Please Try Again!");
            }
    }

我的 HTML 表格是：

<form name="mdeForm">
        Your Weight (kg):
        <input type="text" name="weight" size="25">
        <br /> Your Height (cm):
        <input type="text" name="height" size="25">
        <br />Your Age (years):
        <input type="text" name="age" size="25">
        <br />
        <label class="radio-inline">
          <input type="radio" name="sex" value="female">Female</label>
        <label class="radio-inline">
          <input type="radio" name="sex" value="male">Male </label>
        <br />
        <label class="radio-inline">
          <input type="radio" name="activity" value="sedentary">Sedentary (little or no exercise)</label>
        <label class="radio-inline">
          <input type="radio" name="activity" value="light">Lightly Active (light exercise/sports 1-3 days/week)</label>
        <label class="radio-inline">
          <input type="radio" name="activity" value="moderate">Moderately Active (moderate exercise/sports 3-5 days/week)</label>
        <label class="radio-inline">
          <input type="radio" name="activity" value="very">Very Active (hard exercise/sports 6-7 days a week)</label>
        <label class="radio-inline">
          <input type="radio" name="activity" value="extra">Extra Active (very hard exercise/sports/physical job)</label>
        <input type="button" value="Calculate MDE" onclick="calculateMDE()">
        <br /> Your Minimum Daily Energy Requirement in kcal is:
        <input type="text" name="meaning" size="25">
        <br />
        <input type="reset" value="Reset" />
      </form>

Answer 1

var sex = document.mdeForm.sex.value; //Returns a NodeList in IE

使用它来选择选中的单选按钮：

var sex = document.querySelectorAll('input[name^="sex"]:checked')[0].value;
var activity = document.querySelectorAll('input[name^="activity"]:checked')[0].value;

它returns "checked radio buttons"-NodeList 中第一个元素的值。

应该适用于 IE >= 9

为防止错误，您可以使用：

var checkedSex = document.querySelectorAll('input[name^="sex"]:checked');
var checkedActivity = document.querySelectorAll('input[name^="activity"]:checked');

var sex = (checkedSex.length > 0 ? checkedSex[0].value : null);
var activity = (checkedActivity.length > 0 ? checkedActivity[0].value : null);

否则，如果 none 性别或 activity- 单选按钮被选中，您将收到 "Cannot read property 'value' of undefined"-错误

JSFiddle

JavaScript。每日能量计算器，IE/Safari 错误，但 Chrome/Firefox 运行

JavaScript. Daily Energy Calculator, Error in IE/Safari but running in Chrome/Firefox

javascript

forms

cross-browser

calculator