Поэтому я новичок в 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>
Проблема с вашим скриптом, как указано в комментариях, заключается в том, что вы никогда не вызываете initTH()
, поэтому обработчик нажатия кнопки никогда не присоединяется к кнопке.
То, что комментарии не замечают, заключается в том, что у вас есть свой скрипт, размещенный перед HTML. В частности, он предшествует <input id="calcButton" type="button" value="calculate"/>
, что означает, что если вы не будете осторожны при вызове document.getElementById("calcButton")
, это вернет null
,
Похоже, что вы хотите добавить дополнительный элемент <script>
в конце тела (непосредственно перед </body>
close </body>
) и вызвать initTH()
:
....
<script>
initTH();
</script>
</body>
Как уже говорили другие, функция 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>
initTH()
- это функция, но вы никогда ее нигде не вызываете.initTH()
. Просто добавьтеinitTH();
в конце скрипта тег и он должен работать.