从单选按钮到JavaScript的输出不'；行不通

我正在做一个简单的在线表格，使用哈里斯-本尼迪克特方程和帝国测量值计算BMR。我不知道错误在我的代码中的什么地方，但现在只有清除表单按钮起作用。我没有发布整个网页的HTML代码，因为它看起来就像我想要的一样，而这只是我遇到的计算问题

    <form>
        <fieldset id="ImpCalcInfo">
          <label for="ageinput">
            Age
            <input tabindex="1" type="text" id="ageinput" name="age" />
          </label>
          <label for="heightinput">
            Height
            <input tabindex="3" type="text" id="heightinput" name="heigh" />
          </label>
            <label for="weightinput">
            Weight
          <input tabindex="5" type="text" id="weightinput" name="weight" />
          </label>
            <label for="genderinput">
          <input name="gender" tabindex="7" type="radio" id="maleinput" value="1" checked>Male
          <input name="gender" tabindex="9" type="radio" id="femaleinput" value="0">Female      
            </label>
        </fieldset>        
        <input tabindex="11" type="button" id="submit" value="Submit" />
        <input tabindex="13" type="reset" value="Clear fields" />              
     </form>

---

单选按钮不起作用，因为您将它们作为ID，但该ID在输入中不存在。您可以通过

getElementsByName（）[0]

此外，您的事件侦听器不知道在哪里单击按钮，因此按钮id是唯一的，它将仅在您单击提交时侦听该单击

以下是工作演示：

HTML

<form>
        <fieldset id="ImpCalcInfo">
          <label for="ageinput">
            Age
            <input tabindex="1" type="text" id="ageinput" name="age" />
          </label>
          <label for="heightinput">
            Height
            <input tabindex="3" type="text" id="heightinput" name="heigh" />
          </label>
            <label for="weightinput">
            Weight
          <input tabindex="5" type="text" id="weightinput" name="weight" />
          </label>
            <label for="genderinput">
          <input name="gender" tabindex="7" type="radio" id="gender" value="1" checked>Male
          <input name="gender" tabindex="9" type="radio" id="gender" value="0">Female      
            </label>
        </fieldset>        
        <input tabindex="11" type="button" id="submit" value="Submit" />
        <input tabindex="13" type="reset" value="Clear fields" />              
     </form>

年龄
身高
重量
男性的
女的

---

希望这有帮助。

您是否检查了浏览器控制台是否存在任何可能的错误？我认为提交按钮应该是这样的：因为您正在使用此文档。getElementById（“按钮”）虽然您的id是“提交”而不是“按钮”，但我尚未将其上载到服务器上，它在Chrome上本地运行，我有一个错误“加载资源失败：服务器响应状态为404（未找到）“。请检查工作答案。它可以在fiddle上工作，也可以在你的服务器上工作。Wael-我已经解决了这个问题，Chrome中的错误已经消失了。但是，表单仍然不起作用，即使在空字段上也不起作用。无论如何，谢谢。@GregNog您可能有一个旧版本的firefox没有显示警报（）。请卸载并重新安装。它应该会起作用。如果这个答案解决了您的问题，请接受帮助其他成员以及。谢谢

function impCalc() {
    var bmrIm = 0;
    var ageIm = document.getElementById("ageinput").value;
    var heightIm = document.getElementById("heightinput").value;
    var weightIm = document.getElementById("weightinput").value;
    var genderIm = document.getElementsByName("gender")[0].value   

    if (genderIm.value == "1") {
        bmrIm = 66 + (6.2 * weightIm) + (12.7 * heightIm) - (6.76 * ageIm);
    }
    else {
        bmrIm = 655 + (4.35 * weightIm) + (4.7 * heightIm) - (4.7 * ageIm);
    }

    (ageIm && heightIm && weightIm) ? alert("Your BMR is: " + bmrIm) : alert("Please fill in all fields");  

}
var el = document.getElementById('submit');
el.addEventListener("click", impCalc, false);

<form>
        <fieldset id="ImpCalcInfo">
          <label for="ageinput">
            Age
            <input tabindex="1" type="text" id="ageinput" name="age" />
          </label>
          <label for="heightinput">
            Height
            <input tabindex="3" type="text" id="heightinput" name="heigh" />
          </label>
            <label for="weightinput">
            Weight
          <input tabindex="5" type="text" id="weightinput" name="weight" />
          </label>
            <label for="genderinput">
          <input name="gender" tabindex="7" type="radio" id="gender" value="1" checked>Male
          <input name="gender" tabindex="9" type="radio" id="gender" value="0">Female      
            </label>
        </fieldset>        
        <input tabindex="11" type="button" id="submit" value="Submit" />
        <input tabindex="13" type="reset" value="Clear fields" />              
     </form>