1 Reply Latest reply on Dec 10, 2016 1:56 PM by try67

    Creating a simple calculation

    chriso123

      I am trying to create a simple page that calculates the total cost of the shirts either individually or when they are added together for a final total. I think I am very close but I cant get the total to add or display in the input box. Maybe you guys can help me out. Its for a final project for class and my teacher cant seem to help me either. Please Internet help me!!!!!

       

      here is my code: The start of the function is in the head and then the calling for the function is towards the bottom.

       

      <!doctype html>

      <html>

        <head>

        <meta charset="utf-8">

        <title>Shirts</title>

        <link href="styles/eccomercestyle.css" rel="stylesheet" type="text/css">

        <script type="text/javascript">

       

          // cost of items in dollars

          var costShirt = 10; 

         

         

         

            function updateTotal(){

              var tot = 0;

              tot += f.blackShirt.value * costBlack +

          f.whiteShirt.value * costWhite +

          f.blueShirt.value * costBlue;

              document.getElementById("cost").value = tot.toFixed(2);

            }

       

        </script>

        </head>

       

       

        <body>

      <div id="logo"> <a href="index.html"> <img src="instalogo.png" width="493" height="91" alt="Return home"/> </a> </div>

      <h1 style="font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size: medium; color: #FF7208;">Choose a style.</h1>

      <div id="container">

          <table width="200" border="1" bordercolor="black">

          <tbody>

              <tr>

              <td><img src="blackcottonPNG.png" width="160" height="200" alt="Choose a quantity"/>

                 

                  <br>

            <form action="" method="POST" name="myForm" id="myForm">

               <label for="blackShirt"><strong>Black T $10.00 x </strong></label>

                  <select id="blackShirt">

                      <option>0</option>

                      <option>1</option>

                      <option>2</option>

                      <option>3</option>

                    </select>

                  </br>

               </td>

              

              <td><img src="whitecottonPNG.png" width="160" height="200" alt="Choose a quantity"/>

                             <br>

             <label for="whiteShirt"><strong>Black T $10.00 x </strong></label>

             <select id="whiteShirt">

                      <option>0</option>

                      <option>1</option>

                      <option>2</option>

                      <option>3</option>

                    </select>

                  </br>

                </td>

               

              <td><img src="bluecottonPNG.png" width="160" height="200" alt="Choose a quantity"/>

                  <br>

                  <label for="blueShirt"><strong>Black T $10.00 x </strong></label>

                  <select id="blueShirt">

                      <option>0</option>

                      <option>1</option>

                      <option>2</option>

                      <option>3</option>

                    </select>

                  </br>

                </form></td>

            </tr>

            </tbody>

        </table>

        

          <h3>SUBTOTAL:</h3>

          <div> $

          <input type="text" id="cost" value="0" readonly size="3"/>

        </div>

          <div>

          <input type="submit"/>

        </div>

      </main>

        

          <script type="text/javascript">

            var f = document.forms['myForm'];

            var sel = document.getElementsByTagName("select");

       

       

            for(var i=0; i<sel.length; i++) {

              sel[i].onchange = function(){updateTotal()};

            }

           

           // here the form data is submitted to the server

            f.onsubmit = function(){

              alert("Your total cost will be: $" + f.cost.value);

              return false;

            }

            </script>

        </div>

      </body>

      </html>