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

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

html

用户输入HTML后计算结果不显示,html,Html,我正在用HTML完成一项作业，我们应该创建一个页面，该页面至少使用一个函数根据用户输入执行数学计算。我已经把代码写在下面了，但是当我点击“计算”按钮时，屏幕上什么也没有显示。有人能告诉我我做错了什么吗？这是我的密码： <!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l

我正在用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>


目标与平均值计算器







目标与平均值计算器
输入允许的目标数
输入播放的分钟数
规则博弈长度
算计
进球数与平均数之比

函数转换（）{
var Goals=document.getElementById（“GoalsAllowed”）.value；
var Minutes=document.getElementById（“MinutesPlayed”）.value；
var GameLength=document.getElementById（“GameLength”）.value；
var GAA=（目标*游戏长度）/分钟；
document.getElementById（“GAA”）.innerHTML=GAA；
}
document.getElementById（“按钮”）。
addEventListener（“单击”，转换，假）；

您没有ID为

MinutesPlayed

和

GameLength

的输入。出现一个错误，您无法访问null的属性

值

您的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;

}

您没有ID为

MinutesPlayed

和

GameLength

的输入。出现一个错误，您无法访问null的属性

值

您的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;

}

您可以在这里使用jQuery使用另一种选择您可以通过下载文件或使用如下所示的google 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>


享受
输入允许的目标数
输入播放的分钟数
规则博弈长度
算计
进球数与平均数之比
var进球数、上场分钟数、规则赛时长，GAA=“”//初始化我们将要使用的所有变量
$（文档）。在（'click'，'#button'，函数（e）{//这是检查是否已单击带有id按钮的按钮
e、 preventDefault（）；//此处阻止其默认操作，使其不会刷新页面
number_of_GoalsAllowed=$（“#GoalsAllowed”）.val（）；//获取为目标数输入的值
播放的分钟数=$（'#MPlayed'）.val（）；//获取为播放的分钟数输入的值
规则游戏长度=$（'#MinGame'）.val（）//捕获规则游戏长度
GAA=（进球数*规则赛时长）/上场分钟数；//根据所获得的数值使用公式计算
$（'#GAA'）.html（GAA）；//在id为GAA的h1标记中打印结果
});

在这里，您可以使用jQuery进行另一种选择您可以通过下载文件或使用如下所示的google 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>


享受
输入允许的目标数
输入播放的分钟数
规则博弈长度
算计
进球数与平均数之比
var进球数、上场分钟数、规则赛时长，GAA=“”//初始化我们将要使用的所有变量
$（文档）。在（'click'，'#button'，函数（e）{//这是检查是否已单击带有id按钮的按钮
e、 preventDefault（）；//此处阻止其默认操作，使其不会刷新页面
number_of_GoalsAllowed=$（“#GoalsAllowed”）.val（）；//获取为目标数输入的值
播放的分钟数=$（'#MPlayed'）.val（）；//获取为播放的分钟数输入的值
规则游戏长度=$（'#MinGame'）.val（）//捕获规则游戏长度
GAA=（目标数量*规则）