所以我对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 A Workout</a> |
<a href="accessories.html">Fitness Accessories</a>
</div>
<p> </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> </tr>
<tr> </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> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr>
<th colspan="2">
Your Target Heart Rate Zone is: <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>
答案 0 :(得分：0)
正如评论中所指出的，您的脚本问题在于您永远不会调用initTH()，因此按钮单击处理程序永远不会附加到按钮上。
评论未注意到的是您在 HTML之前放置了脚本。特别是它出现在<input id="calcButton" type="button" value="calculate" />之前，这意味着如果您在致电document.getElementById("calcButton")时不小心，则会返回null。
听起来你想要做的是在正文的 end 处添加一个额外的<script>元素（在关闭</body>标记之前）并调用{{ 1}}：
initTH()答案 1 :(得分：0)
正如其他人所提到的，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 A Workout</a> |
<a href="accessories.html">Fitness Accessories</a>
</div>
<p> </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> </tr>
<tr> </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> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr>
<th colspan="2">
Your Target Heart Rate Zone is: <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>