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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Add button not working to add points together

    Hi guys i am new to writing code and was wondering if you guys can help. I have written a simple code to calculate points everything works but it is very scruffy as you can see when you put it on a web page
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function addMe(frm)
    {
    	var a = Number(frm.a.value);
    	var b = Number(frm.b.value);
            var c = Number(frm.c.value);
    	var d = Number(frm.d.value);
    	var e = Number(frm.e.value);
    	var f = Number(frm.f.value);
    	var g = Number(frm.g.value);
    	var h = Number(frm.h.value);
    	var i = Number(frm.i.value);
    	var j = Number(frm.j.value);
    	var k = Number(frm.k.value);
    	var l = Number(frm.l.value);
    	var m = Number(frm.m.value);
    	var n = Number(frm.n.value);
    	var o = Number(frm.o.value);
    	var p = Number(frm.p.value);
    
    
    	var val1 = (b - a) * 2;
            var val2 = (d - c) * 4;
            var val3 = (f - e) *6;
    	var val4 = (h - g) *8;
            var val5 = (j - i) *10;
            var val6 = (l - k) *12;
    	var val7 = (n - m) *13;
            var val8 = (p - o) *14;
            var val9 = val1 + val2 + val3 + val4 + val5 + val6 + val7 + val8 ;
    	frm.Result1.value = val1;
            frm.Result2.value = val2;
            frm.Result3.value = val3;
            frm.Result4.value = val4;
            frm.Result5.value = val5;
    	frm.Result6.value = val6;
            frm.Result7.value = val7;
            frm.Result8.value = val8;
            frm.Result9.value = val9;
    
    }
    </script>
    </head>
    <body>
    <form>
    Sid the vicious<input type="text" name="a">
    <input type="text" name="b">
    <input type="text" name="Result1"><br>
    Chief Nikolai<input type="text" name="c">
    <input type="text" name="d">
    <input type="text" name="Result2"><br>
    Lady Catherine<input type="text" name="e">
    <input type="text" name="f">
    <input type="text" name="Result3"><br>
    Lord Maxwell<input type="text" name="g">
    <input type="text" name="h">
    <input type="text" name="Result4"><br>
    Bobon the hideous<input type="text" name="i">
    <input type="text" name="j">
    <input type="text" name="Result5"><br>
    Count Malcolm<input type="text" name="k">
    <input type="text" name="l">
    <input type="text" name="Result6"><br>
    Countess Romy<input type="text" name="m">
    <input type="text" name="n">
    <input type="text" name="Result7"><br>
    Priestess Ta-apep<input type="text" name="o">
    <input type="text" name="p">
    <input type="text" name="Result8"><br>
    Total Points<input type="text" name="Result9"><br>
    <input type="button" name="add" value="Add" onclick="addMe(this.form);">
    </form>
    </body>
    </html>
    Then i came up with this one and it looks neat and tidy but my Add button will not add all of the totals together and i was wondering if you caould point me to where i am going wrong
    Code:
     <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('input').keyup(function () {
    function addMe(frm)
    {
    	var a = Number(frm.a.value);
    	var b = Number(frm.b.value);
            var c = Number(frm.c.value);
    	var d = Number(frm.d.value);
    	var e = Number(frm.e.value);
    	var f = Number(frm.f.value);
    	var g = Number(frm.g.value);
    	var h = Number(frm.h.value);
    	var i = Number(frm.i.value);
    	var j = Number(frm.j.value);
    	var k = Number(frm.k.value);
    	var l = Number(frm.l.value);
    	var m = Number(frm.m.value);
    	var n = Number(frm.n.value);
    	var o = Number(frm.o.value);
    	var p = Number(frm.p.value);
    
    
    	var val1 = (b - a) * 2;
            var val2 = (d - c) * 4;
            var val3 = (f - e) *6;
    	var val4 = (h - g) *8;
            var val5 = (j - i) *10;
            var val6 = (l - k) *12;
    	var val7 = (n - m) *13;
            var val8 = (p - o) *14;
            var val9 = val1 + val2 + val3 + val4 + val5 + val6 + val7 + val8 ;
    	frm.Result1.value = val1;
            frm.Result2.value = val2;
            frm.Result3.value = val3;
            frm.Result4.value = val4;
            frm.Result5.value = val5;
    	frm.Result6.value = val6;
            frm.Result7.value = val7;
            frm.Result8.value = val8;
            frm.Result9.value = val9;
    
    }
    </script>
    </head>
    <body>
      <table>
        <thead>
          <tr>
            <th></th>
            <th>Start</th>
            <th>Finish</th>
            <th>Total Points</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><label for="a">Sid the vicious</label></td>
            <td><input type="text" id="a"/></td>
            <td><input type="text" id="b"/></td>
            <td><input type="text" id="Result1"/></td>
          </tr>
          <tr>
            <td><label for="c">Chief Nikolai</label></td>
            <td><input type="text" id="c"/></td>
            <td><input type="text" id="d"/></td>
            <td><input type="text" id="Result2"/></td>
          </tr>
          <tr>
            <td><label for="e">Lady Catherine</label></td>
            <td><input type="text" id="e"/></td>
            <td><input type="text" id="f"/></td>
            <td><input type="text" id="Result3"/></td>
          </tr>
          <tr>
            <td><label for="g">Lord Maxwell</label></td>
            <td><input type="text" id="g"/></td>
            <td><input type="text" id="h"/></td>
            <td><input type="text" id="Result4"/></td>
          </tr>
          <tr>
            <td><label for="i">Bobon the hideous</label></td>
            <td><input type="text" id="i"/></td>
            <td><input type="text" id="j"/></td>
            <td><input type="text" id="Result5"/></td>
          </tr>
          <tr>
            <td><label for="k">Count Malcolm</label></td>
            <td><input type="text" id="k"/></td>
            <td><input type="text" id="l"/></td>
            <td><input type="text" id="Result16"/></td>
          </tr>
          <tr>
            <td><label for="m">Countess Romy</label></td>
            <td><input type="text" id="m"/></td>
            <td><input type="text" id="n"/></td>
            <td><input type="text" id="Result7"/></td>
          </tr>
          <tr>
            <td><label for="p">Priestess Ta-apep</label></td>
            <td><input type="text" id="o"/></td>
            <td><input type="text" id="p"/></td>
            <td><input type="text" id="Result8"/></td>
          </tr>
          <tr>
            <td><label for="inh">Total Points</label></td>
            <td><input type="text" id="Result9"/></td>
          </tr>
          <input type="button" name="add" value="Add" onclick="addMe(this.form);"/>
        </tbody>
      </table>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    <input type="button" name="add" value="Add" onclick="addMe(this.form);"/>

    There is no form!

    It is not a good idea to assign the same name to an HTML element and a Javascript variable. It can lead to big problems.

    Why are you loading your simple page with jQuery and its large overhead?

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 10-01-2012 at 07:47 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay then how would i change the script so it has a form??

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by StuW247 View Post
    Okay then how would i change the script so it has a form??
    You had a form in your first code!

    </head>
    <body>
    <form>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    You had a form in your first code!

    </head>
    <body>
    <form>
    Tried putting the form back in and no joy

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    It works if you delete all this:-

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    $(document).ready(function () {
    $('input').keyup(function () {

    Suggest you validate your markup. See http://validator.w3.org/
    Last edited by Philip M; 10-01-2012 at 10:28 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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