带有小 Javascript 代码的简单表单提交按钮 - 不起作用？答案

【问题标题】：Simple Form Submit button with Small Javascript Code - not working?带有小 Javascript 代码的简单表单提交按钮 - 不起作用？
【发布时间】：2016-06-06 18:05:37
【问题描述】：

我正在用 HTML 创建一个网页，其中包含 javascript 和一个带有提交按钮的小表单，该按钮调用整个 javascript 代码的功能。

这应该用作 BMR + 维持卡路里计算器。使用显示的公式：

男性公制 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>

【问题讨论】：

提交会怎样？
@ninaScholz 抱歉，刚刚编辑了帖子！该按钮没有做任何事情，它曾经将用户发送到一个新页面并显示 document.write 文本，但现在它没有。谢谢
您是否在浏览器开发者工具控制台上看到任何错误？
It used to send the user to a new page - 不是document.write 它没有

标签： javascript html css forms web

【解决方案1】：

好的，你遇到了这些问题：

这些值应该从文本解析为数字，当计算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 个vars 被分配给不存在的元素对象。没有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

以下是sn-p

片段

<!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>

【讨论】：

这是为您的努力而设计的。答案也很好。
谢谢您，先生。我没有注意到那个“+”，直到我把它弄掉了，好眼睛。

【解决方案2】：

你的问题就出来了

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

【讨论】：

感谢您发现这一点，我已经进行了更改，但仍然无法正常工作：/ 我已经更新了帖子中的代码。谢谢！
我建议使用浏览器调试工具：在 Chrome CTRL+Shift+I 上，你的 JavaScript 错误会显示在控制台窗口的右上角。您单击它，它会准确显示出问题所在以及脚本中的位置。
您建议的 div 标签使其完美运行，非常感谢您的帮助