javascript / html不会显示计算结果
[英]javascript / html won't display result of calculation
问题描述
我正在尝试创建一个心率区计算器，但它不会显示计算结果。 我是javascript和html的新手（来自Java背景），因此谨记任何帮助和建设性批评！
<html> <head> <title>BMI Calculator</title> <script type="text/javascript"> function CalculateBMI() { //Obtain user inputs var Intensity = Number(document.getElementById("Intensity").value); var select_intensity = document.getElementById("select_intensity").value; var Age = Number(document.getElementById("Age").value); //Perform calculation based on intensity if (select_intensity == "Moderate") { var output = (220-Age)*.5; var output2 = (220-Age)*.7; } if (select_intensity == "High Intensity") { output = (220 - Age) * .7; output2 = (220 - Age) * .85; } //Display result of calculation document.getElementById("output").innerHTML=output " to " output2; } </script> </head> <body> <h1>Heart Rate Zone Calculator</h1> <p>Select Your Workout Intensity: <select type="multiple" id="Intensity"> <option value="Moderate"selected="selected">Moderate</option> <option value="High Intensity">High Intensity</option> </select> </p> <p>Enter your age: <input type="text" id="Age"/> </p> <input type="submit" value="Calculate Target Heart Rate" onclick="CalculateBMI();"> <h1>Your Target Heart Rate Zone Is: <span id="output" >?</span></h1> </body>
3 个解决方案
解决方案1
1 已采纳 2016-03-28 02:31:31
您的Javascript有几个问题：
1）您有2个强度变量：
var Intensity = Number(document.getElementById("Intensity").value);
var select_intensity = document.getElementById("select_intensity").value;
Intensity指的是正确的元素，但是您的所有代码似乎都仅引用select_intensity变量。 改为这样做：
var select_intensity = document.getElementById("Intensity").value;
2）您忘记在字符串" to " +周围加上+进行串联。
document.getElementById("output").innerHTML=output + " to " + output2;
修复这两个问题均应使其正常工作。
解决方案2
0 2016-03-28 02:35:20
去掉
var Intensity = Number(document.getElementById("Intensity").value);
并改变
var select_intensity = document.getElementById("Intensity").value;
至
var select_intensity = document.getElementById("select_intensity ").value;
也改变这个
document.getElementById("output").innerHTML=output + " to " + output2;
最终这就是您的代码的外观
<html> <head> <title>BMI Calculator</title> <script type="text/javascript"> function CalculateBMI() { //Obtain user inputs //var Intensity = Number(document.getElementById("Intensity").value); var select_intensity = document.getElementById("Intensity").value; var Age = Number(document.getElementById("Age").value); //Perform calculation based on intensity if (select_intensity == "Moderate") { var output = (220-Age)*.5; var output2 = (220-Age)*.7; } if (select_intensity == "High Intensity") { output = (220 - Age) * .7; output2 = (220 - Age) * .85; } //Display result of calculation document.getElementById("output").innerHTML=output + " to " + output2; } </script> </head> <body> <h1>Heart Rate Zone Calculator</h1> <p>Select Your Workout Intensity: <select type="multiple" id="Intensity"> <option value="Moderate"selected="selected">Moderate</option> <option value="High Intensity">High Intensity</option> </select> </p> <p>Enter your age: <input type="text" id="Age"/> </p> <input type="submit" value="Calculate Target Heart Rate" onclick="CalculateBMI();"> <h1>Your Target Heart Rate Zone Is: <span id="output" >?</span></h1> </body>
解决方案3
0 2016-03-28 02:39:39
smaili的答案总结了这一点。 我想补充一下，作为一个新的JavaScript程序员，您将要在浏览器中熟悉console.log()和F12（除非您具有完整的JS dev IDE）。
Javascript switch 语句计算由另一个 function 调用以显示结果计算
[英]Javascript switch statement calculation called by another function to display result calculation
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.