卡路里计算器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;
}
    }

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

这是一个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中，只有极少数情况下实际上必须使用分号。

你可以在这里看到一个工作的代码笔