卡路里计算器 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 中的 "male" 会变成那个值，66.47。然后我假设身高和体重是读取为用户在输入表单中输入的任何数字，然后作为 ID 为 totalCals.

的 <p> 元素的段落吐出

这是一个 JS fiddle：https://jsfiddle.net/oafu54x3/

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

任何建议都会有所帮助。

Answer 1

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

你也应该使用 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

卡路里计算器 Javascript 表格

Calorie Calculator Javascript Form

html

javascript

forms

input

innerhtml