热量计算器Javascript表单_Javascript_Html_Forms_Input_Innerhtml

热量计算器Javascript表单

javascript html forms input

热量计算器Javascript表单,javascript,html,forms,input,innerhtml,Javascript,Html,Forms,Input,Innerhtml,我正在尝试第一次使用Javascript获取用户输入，然后更改元素的html以输出值。这是一个卡路里计算器。以下是我的HTML、javascript，以及我认为在我有限的知识范围内应该发生的事情的解释： <center> <p>Fill out the form below.</p> <input type="radio" name="female" value=

我正在尝试第一次使用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;
}
    }


填写下面的表格
女性
男性
年龄


高度-以英寸为单位（12英寸=1英尺）
重量（磅）


每日千卡
函数calsPerDay（）{
var age=document.getElementById（“age”）.value；
var height=document.getElementById（“height”）.value；
var-weight=document.getElementById（“weight”）.value；
var female=document.getElementsByName（“女性”）.value；
var male=document.getElementsByName（“male”）.value；
if（document.getElementsByName（“male”）.选中）{
男性+（13.75*体重/2.2）+（5.0*（身高*2.54）-（6.75 x年龄）；
document.getElementById（“totalCals”）.innerHTML=maleCals；
}else（document.getElementsByName（“女性”）。选中）{
女性变量=女性+（9.56*体重/2.2）+（1.84*（身高*2.54）-（4.67 x年龄）；
document.getElementById（“totalCals”）.innerHTML=femaleCals；
}
}

我希望函数首先检查用户是否勾选了男性或女性。然后，如果他们勾选了男性，它将创建一个新变量（不确定这是否是进行此操作的最佳方式0在添加男性的地方（因为我将var male=document.getElementsByName（“男性”）.值，它是一个无线电类型的输入，我读到它会读取你输入的值，所以我假设为“男性”在变量maleCals中，该值为66.47。然后我假设身高和体重将被读取为用户在输入表单中输入的任何数字，然后作为id为totalCals的

元素的一个段落输出

这里有一把JS小提琴：

我的困境是它根本不起作用，当您输入值时，

标记中没有写入任何内容

任何建议都会有帮助。

问题是，当您使用

getElementsByName

时，它返回的是一个对象数组，而不是您要查找的对象

您也应该使用

getElementById

。

问题是，当您使用

getElementsByName

时，它返回的是一个对象数组，而不是您要查找的对象

您也应该使用

getElementById

。

有许多问题

让我们从清理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>

最后清理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()

我知道很多人不会同意，但我个人认为代码重复会分散注意力。在你的代码

文档中，getElementById（id）

经常重复。因此我将这种行为提取到一个小助手函数

find

。现在代码的其余部分读起来好多了

因为对体重、身高应用相同的比例因子，而不管性别，所以我将比例因子移出，现在不再重复

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

在公式中也使用了“x”而不是“*”。这是一个常见的错误，因为从书面代数过渡到计算机算法。注意这一点

最后，我删除了所有不必要的分号，在Javascript中，只有少数情况下你必须使用分号