Reputation: 79

Calculation result not displaying after user input HTML

I'm completing an assignment in HTML where we're supposed to create a page that uses at least one function to perform a mathematical calculation based on user input. I've got the code written below, but when I hit the "calculate" button I've coded in, nothing displays on the screen. Could someone tell me what I'm doing wrong? Here is my code:

<!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>

Upvotes: 0

Answers (2)

Kwizera Innocent

Reputation: 51

you can have another alternative here using jQuery you can include it locally by downloading the file or use google CDN as shown below

            <!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>

Upvotes: 0

Mateusz Woźniak

Reputation: 1499

You do not have inputs with IDs MinutesPlayed and GameLength. There is an error that you cannot access property value of null.

Your JavaScript code should look as follow:

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;

}

Upvotes: 3

Calculation result not displaying after user input HTML

Answers (2)

Related Questions