Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Very new to JS, Need help with an averages calculator

    I have my first ever scholastic JS assignment and so far it's felt nearly impossible to get a grip on how to do it. I've gone through the W3c tutorials entirely 3 times now and still, nothing is clicking mentally. Generally I do better if I can reverse engineer already written code but I can't find anything similar enough to this on the net to figure it out.

    The assignment is to create a grade averages calculator as seen in this picture:



    Along with this starter code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Assignments score calculator</title>
    <style type="text/css">
    <!--
    .score {
        width: 30px;
    }
    -->
    </style>
    </head>
    
    <body>
    <h1>Assignments score calculator</h1>
    
    <form id="calculator" name="calculator" method="post" action="">
    <p>Enter your Name: 
      <label for="firstname"></label>
      <br />
      <input type="text" name="firstname" id="firstname" />
    <p> 
      <label for="A1">Assignment #1 score:</label>
      <input name="A1" type="text" class="score" id="A1" maxlength="3" /><br />
    <label for="A2">Assignment #2 score:</label>
      <input name="A2" type="text" class="score" id="A2" maxlength="3" /><br />
    <label for="A3">Assignment #3 score:</label>
      <input name="A3" type="text" class="score" id="A3" maxlength="3" />
    <p>
      <label for="button"></label>
      <input type="submit" name="Submit" id="Submit" value="Submit" xx="doCalculation(this.form.firstname.value,this.form.A1.value,this.form.A2.value,this.form.A3.value)" />
    </form>
    </body>
    </html>
    I understand what I need to do, just not the syntax to do it. Any help would be appreciated. Sorry for newbiness.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,106
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try...

    This is not the completion of your assignment, but it should get to started toward the finish.
    Note the added comments toward that end.
    It at least produces an output, which your's did not.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Assignments score calculator</title>
    <style type="text/css">
    .score { width: 30px; }
    </style>
    <script type="text/javascript">
    function doCalculation(fname,g1,g2,g3) {
      var str = '<h1>Hello '+fname+'</h1>'
      str += '<p>You reported the following scores: '+g1+' '+g2+' '+g3+'<p>';
    // add more to string for your average calculations
    // add more to string to convert to letter grade
      document.getElementById('results').innerHTML = str;
    // you can add additional CSS to change placement of the results
    }
    </script>
    
    </head>
    
    <body>
    <h1>Assignments score calculator</h1>
    
    <form id="calculator" name="calculator" method="post" action="" onsubmit="return false">
    <p>Enter your Name: 
      <label for="firstname"></label>
      <br />
      <input type="text" name="firstname" id="firstname" />
    <p> 
      <label for="A1">Assignment #1 score:</label>
      <input name="A1" type="text" class="score" id="A1" maxlength="3" /><br />
    <label for="A2">Assignment #2 score:</label>
      <input name="A2" type="text" class="score" id="A2" maxlength="3" /><br />
    <label for="A3">Assignment #3 score:</label>
      <input name="A3" type="text" class="score" id="A3" maxlength="3" />
    <p>
      <label for="button"></label>
      <input type="submit" name="Submit" id="Submit" value="Submit" onclick=doCalculation(this.form.firstname.value,this.form.A1.value,this.form.A2.value,this.form.A3.value)
     />
    <div id="results"></div>
    </form>
    </body>
    </html>
    Good Luck!

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply! I'll work with this and see if I can finish it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •