помощь в расчете необходима с калькулятором целевого сердечного ритма JavaScript

0

Поэтому я новичок в 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>
  • 0
    initTH() - это функция, но вы никогда ее нигде не вызываете.
  • 0
    Вам нужно вызвать вашу initTH() . Просто добавьте initTH(); в конце скрипта тег и он должен работать.
Теги:
calculator

2 ответа

0
Лучший ответ

Проблема с вашим скриптом, как указано в комментариях, заключается в том, что вы никогда не вызываете initTH(), поэтому обработчик нажатия кнопки никогда не присоединяется к кнопке.

То, что комментарии не замечают, заключается в том, что у вас есть свой скрипт, размещенный перед HTML. В частности, он предшествует <input id="calcButton" type="button" value="calculate"/>, что означает, что если вы не будете осторожны при вызове document.getElementById("calcButton"), это вернет null,

Похоже, что вы хотите добавить дополнительный элемент <script> в конце тела (непосредственно перед </body> close </body>) и вызвать initTH():

    ....
    <script>
        initTH();
    </script>
</body>
Поделиться
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&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>
Поделиться
  • 0
    ах спасибо! это имеет гораздо больше смысла! Я сделал эти изменения, и это работает!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню