Question

我正在用HTML完成一项任务，我们应该创建一个页面，该页面使用至少一个函数来根据用户输入执行数学计算。我已经得到了下面写的代码，但是当我点击我编入的“计算”按钮时，屏幕上没有显示任何内容。有人能告诉我我做错了什么吗？这是我的代码：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<Title>Goals Against Average Calculator</Title>
<body>
<script src="modernizr.custom.05819.js"></script><!--Links to file containing modernizer library-->

<!-- Navigation -->
<nav>
  <ul class="w3-navbar w3-black">
    <li><a href="file:///C:/Users/Kyle/Desktop/Document1.html">Home</a></li> <!--Link to Home Page-->
    <li><a href="file:///C:/Users/Kyle/Desktop/Document2.html">NHL Teams</a></li><!--Link to Page of NHL Teams-->
    <li><a href="file:///C:/Users/Kyle/Desktop/Document3.html">AHL Teams</a></li><!--Link to Page of AHL Teams-->
    <li><a href="file:///C:/Users/Kyle/Desktop/Document4.html">WHL Teams</a></li><!--Link to Page of WHL Teams-->
    <li><a href="file:///C:/Users/Kyle/Desktop/Document5.html">G.A.A. Calculator</a></li><!--Link to Page of WHL Teams-->
  </ul>
</nav>
<header>
      <h1 style="text-align:center;">Goals Against Average Calculator</h1><!--Title of Page-->
 </header>
    <article>
      <form>
          <fieldset>
            <label for="GoalsAllowed">
              Enter Number of Goals Allowed
            </label>
            <input type="Goals" id="GoalsAllowed" /><!--Input for Goals Allowed-->
            </fieldset>
            <fieldset>
            <label for="MinutesPlayed">
              Enter Minutes Played
            </label>
            <input type="MinPlayed" id="MPlayed" /><!--Input for Minutes Played-->
          </fieldset>
           <fieldset>
            <label for="GameLength">
              Regulation Game Length
            </label>
            <input type="Minutes" id="MinGame" /><!--Input for Length of Regulation Game-->
            </fieldset>
            <fieldset>
            <button type="button" id="button">Calculate</button><!--Calculation Button-->
          </fieldset>
          <fieldset>
             <p>Goals Against Average</p>
            <p id="GAA">&nbsp;</p>
          </fieldset>
        </form>
   </article>
   <script>
        function convert() {
        var Goals = document.getElementById("GoalsAllowed").value;
        var Minutes = document.getElementById("MinutesPlayed").value;
        var GameLength = document.getElementById("GameLength").value;
        var GAA = (Goals * GameLength) / Minutes;
        document.getElementById("GAA").innerHTML = GAA;
        }
        document.getElementById("button").
        addEventListener("click", convert, false);
   </script>
</body>
</html>

Answer 1

您没有ID MinutesPlayed和GameLength的输入。如果您无法访问null的属性value，则会出现错误。

您的JavaScript代码应如下所示：

function convert() {

    var Goals = document.getElementById("GoalsAllowed").value;
    var Minutes = document.getElementById("MPlayed").value;
    var GameLength = document.getElementById("MinGame").value;

    var GAA = (Goals * GameLength) / Minutes;

    document.getElementById("GAA").innerHTML = GAA;

}

Answer 2

你可以使用jQuery在这里有另一种选择您可以通过下载文件或使用谷歌CDN在本地包含它，如下所示

            <!DOCTYPE html>
            <html>
            <head>
                <title>Enjoy</title>
            </head>
            <body>
               <article>
                  <form>
                      <fieldset>
                        <label for="GoalsAllowed">
                          Enter Number of Goals Allowed
                        </label>
                        <input type="Goals" id="GoalsAllowed" /><!--Input for Goals Allowed-->
                        </fieldset>
                        <fieldset>
                        <label for="MinutesPlayed">
                          Enter Minutes Played
                        </label>
                        <input type="MinPlayed" id="MPlayed" /><!--Input for Minutes Played-->
                      </fieldset>
                       <fieldset>
                        <label for="GameLength">
                          Regulation Game Length
                        </label>
                        <input type="Minutes" id="MinGame" /><!--Input for Length of Regulation Game-->
                        </fieldset>
                        <fieldset>
                        <button type="button" id="button">Calculate</button><!--Calculation Button-->
                      </fieldset>
                      <fieldset>
                         <p>Goals Against Average</p>
                        <h1 id="GAA">&nbsp;</h1>
                      </fieldset>
                    </form>
               </article>
               <!--
               include a jquery file am using jquery-2.1.1.min.js
                you can find a later version
               -->
               <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>    
               <script type="text/javascript">

               var number_of_goals, minutes_played, regulation_game_length, GAA = "";   //initialize all the variables that we are going to use


                $(document).on('click','#button', function(e){  //this is to check if the button with id button has been clicked

                    e.preventDefault();         //here you prevent its default action so that it does not refresh the page

                    number_of_goals = $('#GoalsAllowed').val();     //get the value entered for the number of goals

                    minutes_played = $('#MPlayed').val();           //get the value entered for the minutes played

                    regulation_game_length = $('#MinGame').val();   //capture the regulation game length

                    GAA = (number_of_goals * regulation_game_length) / minutes_played;  //compute using your formular based on the values you have captured


                    $('#GAA').html(GAA);         //print the result in your h1 tag that has id GAA
                });
               </script>
            </body>
            </html>

用户输入HTML后不显示计算结果

2 个答案: