JavaScript.每日能源计算器，错误在IE/Safari，但运行在Chrome/Firefox

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

本文关键字：Safari 运行 Chrome Firefox 每日 IE 计算器 错误 JavaScript      更新时间：2023-09-26

我已经为一个web应用程序编写了这个脚本，但计算器确实在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>

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;

它返回"选中的单选按钮"中第一个元素的值-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);

否则你会得到一个"Cannot read property 'value' of undefined"-错误，如果没有性别或活动单选按钮被选中

JSFiddle

相关文章：