带有小Javascript代码的简单表单提交按钮 - 不起作用
Simple Form Submit button with Small Javascript Code - not working?
我正在用HTML创建一个网页，其中包含javascript和一个小表单，带有一个提交按钮，可以调用整个javascript代码的功能。
这应该用作BMR +维持卡路里计算器。使用如下所示的公式：
- http://www.bmi-calculator.net/bmr-calculator/bmr-formula.php
- http://www.bmi-calculator.net/bmr-calculator/harris-benedict-equation/
男性公制 BMR=66+（13.7 x 体重（公斤）+（5 x 身高厘米）-（6.8 x 年龄（年）
女性公制 BMR=655+（9.6 x 体重（公斤）+（1.8 x 身高厘米）-（4.7 x 年龄（年）
然后发现一个 每日维护卡路里需求（保持相同的体重），根据活动水平有乘数。正是在创建这些 IF 语句时，我开始遇到这些问题。
问题：当我单击提交时，没有任何反应。它曾经将用户发送到显示 document.write 文本的新页面，但现在，它什么都不做。
我认为这是一个相当简单的问题，但我是javascript的新手，所以任何帮助将不胜感激，非常感谢！
<html>
<head>
<title>BMR Calculator</title>
</head>
<body>
<h1> BMR Calculator and Daily Maintenance Calorie Calculator </h1>
<script type="text/javascript" language="javascript">
function Calculate() {
var gender = document.getElementById("gender").value;
var weight = document.getElementById("weight").value;
var height = document.getElementById("height").value;
var age = document.getElementById("age").value;
var result = document.getElementById("result").value;
var MaintenanceCalories = document.getElementById("MaintenanceCalories").value;
var activitylevel = document.getElementById("activitylevel").value;
if(gender=="male")
//English-BMR = 66 + ( 6.23 x weight in pounds ) + ( 12.7 x height in inches ) - ( 6.8 x age in year )
//Metric-BMR = 66 + ( 13.7 x weight in kilos ) + ( 5 x height in cm ) - ( 6.8 x age in years )
{
val1 = 13.7 * weight;
val2 = 5 * height;
val3 = 6.8 * age;
result = 66 + val1 + val2 - val3;
val4 = activitylevel;
}
else if (gender=="female")
//English-Women: BMR = 655 + ( 4.35 x weight in pounds ) + ( 4.7 x height in inches ) - ( 4.7 x age in years)
//Women: BMR = 655 + ( 9.6 x weight in kilos ) + ( 1.8 x height in cm ) - ( 4.7 x age in years )
{
val1 = 9.6 * weight;
val2 = 1.8 * height;
val3 = 4.7 * age;
result = 655 + val1 + val2 - val3;
val4 = activitylevel;
}
if(val4=="l")
{
MaintenanceCalories = result * 1.2;
}
if(val4=="lm")
{
MaintenanceCalories = result * 1.375;
}
if(val4=="m")
{
MaintenanceCalories = result * 1.55;
}
if(val4=="mh")
{
MaintenanceCalories = result * 1.725;
}
else if(val4=="h")
{
MaintenanceCalories = result * 1.9;
}
document.write ('Your BMR is: ' + result.toFixed(2) + '. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2));
}
</script>
<form action="#">
Gender : <select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br/>
Weight (kg.) : <input type="text" id="weight" /><br />
Height (cm): <input type="text" id="height" /><br />
Age : <input type="text" id="age" /><br />
Current Activity Level: <select id="activitylevel">
<option value="l">Sedentary (Little or No Exercise)</option>
<option value="lm">Lightly Active (Light Exercise/Sports 1-3 Days Per Week)</option>
<option value="m">Moderately Active (Moderate Exercise/Sports 3-5 Days Per Week)</option>
<option value="mh">Very Active (Hard Exercise/Sports 6-7 days Per Week)</option>
<option value="h">Extra Active (Very Intense Exercise/Sports and Physical Job Daily)</option>
</select>
</br>
</br>
</fieldset>
<input type="button" value="Submit" onclick="Calculate()"/>
</form>
好的，
您遇到了这些问题：
这些值应该从文本解析为数字，当对val1、val2和val3进行计算时，我没有检查它们是否被隐式转换。我这样做只是因为安全总比后悔好。
var weight = parseFloat(document.getElementById("weight").value);
var height = parseFloat(document.getElementById("height").value);
var age = parseFloat(document.getElementById("age").value);
有 2 个var分配给不存在的元素的对象。没有id result或MaintenanceCalories的元素.
var result = document.getElementById("result").value;
var MaintenanceCalories = document.getElementById("MaintenanceCalories").value;
MaintenanceCalories现在初始化为 0。
有 2 组变量没有正确声明，它们没有var.如果您这样做，那么它们将自动是全局的。虽然在小规模的功能中，它并不重要，但使用var永远不会有什么坏处。
val1 = 13.7 * weight;
val2 = 5 * height;
val3 = 6.8 * age;
result = 66 + val1 + val2 - val3;
val4 = activity
以下是代码片段
片段
<!doctype html>
<html>
<head>
<title>BMR Calculator</title>
</head>
<body>
<h1> BMR Calculator and Daily Maintenance Calorie Calculator </h1>
<script>
function Calculate() {
var gender = document.getElementById("gender").value;
var weight = parseFloat(document.getElementById("weight").value);
var height = parseFloat(document.getElementById("height").value);
var age = parseFloat(document.getElementById("age").value);
var activitylevel = document.getElementById("activitylevel").value;
var MaintenanceCalories = 0;
if(gender=="male")
//English-BMR = 66 + ( 6.23 x weight in pounds ) + ( 12.7 x height in inches ) - ( 6.8 x age in year )
//Metric-BMR = 66 + ( 13.7 x weight in kilos ) + ( 5 x height in cm ) - ( 6.8 x age in years )
{
var val1 = 13.7 * weight;
var val2 = 5 * height;
var val3 = 6.8 * age;
var result = 66 + val1 + val2 - val3;
var val4 = activitylevel;
}
else if (gender=="female")
//English-Women: BMR = 655 + ( 4.35 x weight in pounds ) + ( 4.7 x height in inches ) - ( 4.7 x age in years)
//Women: BMR = 655 + ( 9.6 x weight in kilos ) + ( 1.8 x height in cm ) - ( 4.7 x age in years )
{
var val1 = 9.6 * weight;
var val2 = 1.8 * height;
var val3 = 4.7 * age;
var result = 655 + val1 + val2 - val3;
var val4 = activitylevel;
}
switch(val4) {
case "l":
MaintenanceCalories = result * 1.2;
break;
case "lm":
MaintenanceCalories = result * 1.375;
break;
case "m":
MaintenanceCalories = result * 1.55;
break;
case"mh":
MaintenanceCalories = result * 1.725;
break;
case "h":
MaintenanceCalories = result * 1.9;
break;
default: "m";
}
document.write ('Your BMR is: ' + result.toFixed(2) + '. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2));
}
</script>
<form action="#">
<fieldset>
Gender : <select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br/>
Weight (kg.) : <input type="text" id="weight" /><br />
Height (cm): <input type="text" id="height" /><br />
Age : <input type="text" id="age" /><br />
Current Activity Level: <select id="activitylevel">
<option value="l">Sedentary (Little or No Exercise)</option>
<option value="lm">Lightly Active (Light Exercise/Sports 1-3 Days Per Week)</option>
<option value="m">Moderateley Active (Moderate Exercise/Sports 3-5 Days Per Week)</option>
<option value="mh">Very Active (Hard Exercise/Sports 6-7 days Per Week)</option>
<option value="h">Extra Active (Very Intense Exercise/Sports and Physical Job Daily)</option>
</select>
<br/>
<br/>
</fieldset>
<input type="button" value="Submit" onclick="Calculate()"/>
</form>你的问题就在这里
document.write ('Your BMR is: ' + result.toFixed(2)'. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2));
您缺少+的地方：
document.write ('Your BMR is: ' + result.toFixed(2) + '. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2));
此外，在您给定的示例中，您缺少一些使脚本工作所需的 html 元素。 #result和#MaintenanceCalories我像这样添加它们，它工作得很好：
<div id="result"></div>
<div id="MaintenanceCalories"></div>
另一方面，如果您使用空字符串初始化这些值（并且不再需要添加 html 标签），也可以
：var result = '';
var MaintenanceCalories = '';
此外，为了将表单保留在页面上，您可以在表单的结束标记后添加一个div，其中可以显示结果：
<div id="results"></div>
和 JavaScript，在函数的末尾Calculate()：
results.innerHTML ='Your BMR is: ' + result.toFixed(2) + '. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2);
相关文章：
- 如何将javascript仅应用于1个表单中的2个表单提交按钮中的1个
- 在表单提交按钮的点击事件中调用函数时发生引用错误
- 在我的Javascript和HTML之间的表单提交按钮链接中遇到问题
- 单击表单提交按钮时调用经典ASP函数
- 使用js表单验证器禁用html表单提交按钮
- 联系人表单-提交按钮不起作用
- 使用jQuery切换根据选中的复选框隐藏/显示表单提交按钮 - 如何设置默认关闭的提交按钮
- PHP表单提交按钮，但不离开页面
- 带有小Javascript代码的简单表单提交按钮 - 不起作用
- 表单“提交”按钮文本(和宽度/高度/值）在按键时消失或更改BTN值
- 主干表单提交按钮选项不起作用
- 在响应文件下载时重新启用表单提交按钮
- 从 JSP 中的现有表单提交按钮调用小程序
- 单击表单提交按钮不会调用我的 JS 函数
- Javascript:尝试在新窗口中打开表单提交按钮，链接由单选按钮确定
- 如果上传格式有效，请按表单提交按钮
- 禁用表单提交按钮，直到必填字段未填充为止
- 由于未知原因，Angular按钮正在调用表单提交按钮
- jQuery(或者只是JS）从onSubmit函数中的多个表单提交按钮中进行选择
- 是否可以将跟踪添加到Hubspot表单提交按钮
