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>

來源

2016-03-28 ncrouch25

你想把你的腳本放在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;

解決這兩個問題應該會導致它工作。

來源

2016-03-28 02:31:31 smaili

謝謝你，工作！我很感激 – 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>

來源

2016-03-28 02:35:20 Munawir

smaili的答案概括起來。我只想補充一點，作爲一個新的JavaScript程序員，你會想在你的瀏覽器中熟悉console.log()和F12（除非你有一個完整的JS開發IDE）。

來源

2016-03-28 02:39:39 arkadianriver

幸運的是，我擁有所有jetbrains IDE的許可證，所以我現在使用webstorm – ncrouch25

javascript/html不會顯示計算結果

回答

相關問題