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;
}
    }

我期望发生的是该功能将首先检查用户是否已检查男性或女性。然后，如果他们检查男性，它会创建一个新的变量（不确定这是否是最佳方式，无论如何它添加男性（因为我把var male = document.getElementsByName（“male”）。value及其一个无线电类型的输入，我读到它会读取你输入的值作为值，所以我假设变量maleCals中的“male”将成为该值，66.47。然后我假设高度和重量将被读作任何数字user输入输入表单，然后作为<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属性，并为其他value元素添加了默认input属性。请在部署之前随意删除它们。

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

现在在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中。现在剩下的代码读得好多了。

因为无论性别如何，都会对重量，身高应用相同的缩放系数，因此我将其缩小了，现在又不再重复了。

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

您还使用了＆＃34; x＆＃34;在公式内而不是＆＃34; *＆＃34;。这是从书面代数过渡到计算机算法的常见错误。小心这个。

最后，我删除了所有那些不必要的（和分散注意力的）分号。在Javascript中，只有少数情况下你实际上必须使用分号。

You can see a working CodePen here

卡路里计算器Javascript表格

2 个答案: