javascript目标心率计算器所需的计算帮助答案

【问题标题】：calculation help needed with javascript target heart rate calculatorjavascript目标心率计算器所需的计算帮助
【发布时间】：2014-03-24 00:31:42
【问题描述】：

所以我对 javascript 有点陌生，并且在尝试创建目标心率计算器时遇到了问题。当我单击计算按钮时，没有任何反应。谁能告诉我哪里出错了？

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/workitt.css"> 
<script>
    function initTH(){
        document.getElementById("calcButton").onclick = thr;
    }
    function thr(){
        var age = document.getElementById("age").value;
        if(age = ""){
            document.getElementById("error").innerHTML = "This field is required.";
        }
        else{
            var THRmax = (220-age)*.85;
            var THRmin = (220-age)*.7;
            document.getElementById("THRzone").innerHTML = THRmin + "-" + THRmax;
        }
    }
</script>
<title>Workitt</title>
</head>
 <body>
    <CENTER><div class="header">
    <h1><img src="images/workitt-header.jpg" alt=header ></h1>
       <div class="navbar">
        <a href="workitt.html">Home</a> |
        <a href="profile.html">Profile</a> |
        <a href="createworkout.html">Create&nbsp;A&nbsp;Workout</a> |
        <a href="accessories.html">Fitness&nbsp;Accessories</a>
  </div>
  <p>&nbsp;</p>
  </div></CENTER>   

  <CENTER><div class="body">
  <form>
        <table class="table1" border="7" bordercolor=WHITE width="250" align="center" bgcolor="#ffffff">
          <thead>
            <tr>
              <th colspan="2"><font size=5>
                Target Heart Rate</font>
              </th>
            </tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
          </thead>
          <tbody>
            <tr>
              <td align="center">
                <label for="age">Age:</label>
              </td>
              <td align="center">
                <input type="text" id="age" name="age" size="6"> years
              </td>
            </tr>
            </tbody>
            <thead>
            <tr>
              <th colspan="2" align="center">
                <input id="calcButton" type="button" value="calculate" />
                <span id="error"></span>
              </th>
            </tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>
                <th colspan="2">
                    Your Target Heart Rate Zone is:&nbsp;<span id="THRzone"></span>
                </th>
            </tr>
        </thead>
    </table>
 </form> 
 <p>*Your target heart rate zone is the zone in which your heart rate should be in when exercising to have the most effective workout for improving your fitness and burning calories.</p> 
</div></CENTER>
</body>
</html>

【问题讨论】：

initTH() 是一个函数，但您实际上从未在任何地方调用它。
你需要调用你的initTH()函数。只需在脚本标签末尾添加initTH(); 即可。

标签： javascript html css calculator

【解决方案1】：

正如 cmets 中所指出的，您的脚本的问题在于您从未调用 initTH()，因此按钮单击处理程序永远不会附加到按钮上。

cmets 没有注意到的是，您将脚本放置在 HTML 之前。特别是，它出现在<input id="calcButton" type="button" value="calculate" /> 之前，这意味着如果您在调用document.getElementById("calcButton") 时不小心，将返回null。

听起来你想要做的是在主体的 end （就在关闭 </body> 标记之前）添加一个额外的 <script> 元素并调用 initTH()：

    ....
    <script>
        initTH();
    </script>
</body>

【讨论】：

【解决方案2】：

正如其他人所提到的，initTH() 函数永远不会被调用。

我在这里做了一些更改： http://jsfiddle.net/GaryHarrower/j4v7M/

我删除了这个函数，所以只要按下按钮它就会运行。

脚本还有age = ""，这应该是age == ""，带有2个=符号

让我知道你过得怎么样！

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
    <head>
        <link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/workitt.css"> 
        <title>Workitt</title>
    </head>
    <body>
        <CENTER>
            <div class="header">
                <h1><img src="images/workitt-header.jpg" alt=header ></h1>
                <div class="navbar">
                    <a href="workitt.html">Home</a> |
                    <a href="profile.html">Profile</a> |
                    <a href="createworkout.html">Create&nbsp;A&nbsp;Workout</a> |
                    <a href="accessories.html">Fitness&nbsp;Accessories</a>
                </div>
                <p>&nbsp;</p>
            </div>
        </CENTER>   

        <CENTER>
            <div class="body">
                <form>
        <table class="table1" border="7" bordercolor=WHITE width="250" align="center" bgcolor="#ffffff">
          <thead>
            <tr>
              <th colspan="2"><font size=5>
                Target Heart Rate</font>
              </th>
            </tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
          </thead>
          <tbody>
            <tr>
              <td align="center">
                <label for="age">Age:</label>
              </td>
              <td align="center">
                <input type="text" id="age" name="age" size="6"> years
              </td>
            </tr>
            </tbody>
            <thead>
            <tr>
              <th colspan="2" align="center">
                <input id="calcButton" type="button" value="calculate" />
                <span id="error"></span>
              </th>
            </tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>&nbsp;</tr>
            <tr>
                <th colspan="2">
                    Your Target Heart Rate Zone is:&nbsp;<span id="THRzone"></span>
                </th>
            </tr>
        </thead>
    </table>
 </form> 
 <p>*Your target heart rate zone is the zone in which your heart rate should be in when exercising to have the most effective workout for improving your fitness and burning calories.</p> 
</div></CENTER>
<script>
            document.getElementById("calcButton").onclick = thr;

            function thr(){
                var age = document.getElementById("age").value;
                if(age == ""){
                    document.getElementById("error").innerHTML = "This field is required.";
                }
                else
                {
                    var THRmax = (220-age)*.85;
                    var THRmin = (220-age)*.7;
                    document.getElementById("THRzone").innerHTML = THRmin + "-" + THRmax;
                }
            }
        </script>
</body>
</html>

【讨论】：

啊，谢谢！这更有意义！我做了这些改变，它有效！