卡路里计算器 Javascript 表单

Question

我正在尝试第一次尝试使用 Javascript 获取用户输入，然后更改元素的 html 以输出一个值。这是一个卡路里计算器。这是我的 HTML、我的 javascript，以及我认为在我有限的知识下应该发生的事情的解释：

                    <center>

            <p>Fill out the form below.</p>

            <input type="radio" name="female" value="665.09" oninput="calsPerDay" ><p>Female</p>
            <input type="radio" name="male" value="66.47" oninput="calsPerDay" ><p>Male</p>
            <input id="age" type="number" oninput="calsPerDay"><p>Age</p><br>
            <input id="height" type="number" oninput="calsPerDay"><p> Height- In Inches (12 inches=1 foot)</p>
            <input id="weight" type="number" oninput="calsPerDay"><p> Weight (in pounds)</p><br>

            </center>
            <p id="totalCals"> </p> <p>kcal per day</p>

    function calsPerDay() {
var age=document.getElementById("age").value;
var height=document.getElementById("height").value;
var weight=document.getElementById("weight").value;
var female=document.getElementsByName("female").value;
var male=document.getElementsByName("male").value;
if (document.getElementsByName("male").checked) {
    var maleCals = male+ (13.75 * weight/2.2) + (5.0 * (height * 2.54) - (6.75 x age);
        document.getElementById("totalCals").innerHTML = maleCals; 
} else (document.getElementsByName("female").checked) {
    var femaleCals = female + (9.56 * weight/2.2) + (1.84 * (height * 2.54) - (4.67 x age); 
        document.getElementById("totalCals").innerHTML = femaleCals;
}
    }

我期望发生的是该函数将首先检查用户是否勾选了男性或女性。然后，如果他们检查男性，它会创建一个新变量（不确定这是否是执行此操作的最佳方式0，它添加男性（因为我把 var male = document.getElementsByName("male").value 和它的一个无线电类型输入，我读到它会读取你输入的值，所以我假设变量maleCals中的“男性”会变成那个值，66.47。然后我假设身高和体重将被读取为任何数字用户输入输入表单，然后作为<p> 元素的段落吐出，id 为totalCals。

这是一个 JS 小提琴：https://jsfiddle.net/oafu54x3/

我的困境是它根本不起作用，当您输入值时，<p> 标记中没有写入任何内容。

任何建议都会有所帮助。

Answer 1

问题是当您使用getElementsByName 时，它会返回一个对象数组，而不是您要查找的对象。

你也应该使用getElementById。

Answer 2

有很多问题。

让我们从清理 HTML 开始：-

<h1>Fill out the form below.</h1>
<label>Female:
  <input id="female" type="radio" name="gender" onchange="calsPerDay()">
</label>
<label>Male:
  <input id="male" type="radio" name="gender" onchange="calsPerDay()" checked>
</label>
<label>Age:
  <input id="age" type="number" oninput="calsPerDay()" value="50">
  years
</label>
<label>Height:
  <input id="height" type="number" oninput="calsPerDay()" value="70">
  in inches (12 inches=1 foot)
</label>
<label>Weight:
  <input id="weight" type="number" oninput="calsPerDay()" value="225">
  in pounds
</label>
<label>
  Base metabolic rate: <span id="totalCals"></span> kcal per day
</label>

通过将input 元素放置在label 标记中，用户现在可以单击标签中的任意位置以赋予包含的input 元素焦点。

还要注意两个单选按钮需要具有相同的name 属性。所以为了区分它们，它们需要有不同的id属性。

在某些浏览器上，您需要将() 放在每个事件处理程序名称的末尾。如果您无法预测客户端将使用哪个浏览器，那么最好谨慎行事。所以总是包括他们。

为了使测试更容易，我为男性单选按钮添加了selected 属性，并为其他input 元素添加了默认value 属性。请在部署前随意删除它们。

单选按钮上的value 属性实际上属于模型（即javascript）而不是视图（即html）。

现在在 CSS 中添加一点样式：-

label {
  display: block;
  box-shadow: 0.1em 0.1em 0.2em #888;
  margin: 1em;
  border-radius: 1ex;
  padding: 1ex 1em;
}
input[type=number] {
  text-align: right;
  border: none;
}
input {
  float: right;
}
span {
  font-weight: bold;
}

最后清理 Javascript：-

function calsPerDay() {
  function find(id) { return document.getElementById(id) }

  var age = find("age").value
  var height = find("height").value * 2.54
  var weight = find("weight").value / 2.2
  var result = 0
  if (find("male").checked) 
    result = 66.47 + (13.75 * weight) + (5.0 * height - (6.75 * age))
  else if (find("female").checked)
    result = 665.09 + (9.56 * weight) + (1.84 * height - (4.67 * age))
  find("totalCals").innerHTML = Math.round( result )
}
calsPerDay()

我知道很多人不会同意，但我个人认为代码重复会分散注意力。在您的代码中，document.getElementById(id) 经常重复。所以我将这种行为提取到一个小辅助函数find 中。现在剩下的代码读起来好多了。

因为您对体重、身高应用了相同的比例因子，而与性别无关，所以我将它移出，现在不再重复。

请注意，我假设缺少的右大括号应该放在公式的末尾。我无法检查这一点，因为我无权访问您发现这些公式的源文档。

您还在公式中使用了“x”而不是“*”。这是从书面代数过渡到计算机算法时的常见错误。小心这个。

最后我删除了所有不必要的（和分散注意力的）分号。在 Javascript 中，您实际上必须使用分号的情况很少见。

You can see a working CodePen here