javascript/html不会显示计算结果

问题描述：

我试图创建一个心率区计算器，但它不会显示计算结果。我是新来的JavaScript和HTML（来自java背景），所以任何帮助和建设性的批评，铭记这是值得赞赏的！javascript/html不会显示计算结果

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

你想把你的脚本放在body里面，但在HTML div之后。 – httpNick

你错过了'document.getElementById（“output”）。innerHTML = output“到output2;' – j08691

的竞争者（'+'）我试过了这两个建议，不幸的是它仍然没有显示答案 – ncrouch25

答

你有几个问题与你的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;

解决这两个问题应该会导致它工作。

谢谢你，工作！我很感激 – ncrouch25

没问题！请记住标记为已回答:) – smaili

答

删除

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>

答

smaili的答案概括起来。我只想补充一点，作为一个新的JavaScript程序员，你会想在你的浏览器中熟悉console.log()和F12（除非你有一个完整的JS开发IDE）。

幸运的是，我拥有所有jetbrains IDE的许可证，所以我现在使用webstorm – ncrouch25

javascript/html不会显示计算结果

相关推荐