www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Confused Editing Code

  1. #1
    Join Date
    Mar 2014
    Posts
    47

    Confused Editing Code

    HI, Kevin2

    Has helped me out by giving me a template code to work to but I am currently having trouble editing it and as he is not online was hoping someone could help me out.

    Basically I have a HTML file and a .js file.

    Within the HTML file I have various dropdowns.

    I am able to add options to the HTML code which is straight forward but how do I edit the code in .js that when I select an option from the dropdown it calls the correct part from the .js file?

    This is the HTML code that I have edited to include new dropdown selections named 0,1,2,3,4,5,6

    <td style="text-align:right;">Class:</td>
    <td><select id="class" name="class" onchange="cl(this,cl11,cl12,cl13,cl14,cl15,cl16,cl21,cl22,cl23,cl24,cl25,cl26,clp)">
    <option value="">Choose one</option>
    <option value="0">0</option> <!-- repeat options as necessary -->
    <option value="0">1</option>
    <option value="0">2</option>
    <option value="0">3</option>
    <option value="0">4</option>
    <option value="0">5</option>
    <option value="0">6</option>
    </select></td>


    How or where do I edit the .js?

    Here is what I tried to edit by adding value for the dropdown named 1

    function cl(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,pe rc){
    switch(el.value){
    case '0':
    oneone.value='1';
    onetwo.value='2';
    onethree.value='3';
    onefour.value='4';
    onefive.value='4';
    onesix.value='3';
    twoone.value='2';
    twotwo.value='1';
    twothree.value='2';
    twofour.value='3';
    twofive.value='4';
    twosix.value='3';
    perc.value='3.50';
    break;
    case '1':
    oneone.value='1';
    onetwo.value='2';
    onethree.value='3';
    onefour.value='4';
    onefive.value='4';
    onesix.value='3';
    twoone.value='2';
    twotwo.value='1';
    twothree.value='2';
    twofour.value='3';
    twofive.value='4';
    twosix.value='3';
    perc.value='3.50';
    break;

  2. #2
    Join Date
    Oct 2013
    Posts
    517
    In the HTML options, change the value="0" to value="1" or whatever number. Add <option> tags in the appropriate places for each race track or age, or whatever.

    In the JS, I essentially created a grid of the two rows of inputs for each dropdown. oneone is row 1, input1. twothree is row 2, input 3, etc. Put your numbers for each option there. Add a "case" for each option.

  3. #3
    Join Date
    Mar 2014
    Posts
    47
    Quote Originally Posted by Kevin2 View Post
    In the HTML options, change the value="0" to value="1" or whatever number. Add <option> tags in the appropriate places for each race track or age, or whatever.

    In the JS, I essentially created a grid of the two rows of inputs for each dropdown. oneone is row 1, input1. twothree is row 2, input 3, etc. Put your numbers for each option there. Add a "case" for each option.
    Where is the value="0" that I am changing to value="1"

    Do I need to cut and paste.

    Is the HTML example correct? and also is the javascript example correct?

  4. #4
    Join Date
    Mar 2014
    Posts
    47
    Sorry I was just being silly, I can see now how to edit it. I was cutting and pasting and forgetting to change the values.

    Silly mistake, I havent used Javascript of HTML in a while. I am no expert just need to get my head around it all again.

  5. #5
    Join Date
    Oct 2013
    Posts
    517
    Code:
    <td style="text-align:right;">Class:</td>
    <td><select id="class" name="class" onchange="cl(this,cl11,cl12,cl13,cl14,cl15,cl16,cl21,cl22,cl23,cl24,cl25,cl26,clp)">
    <option value="">Choose one</option>
    <option value="0">0</option>	<!-- repeat options as necessary -->
    <option value="1">1</option>
    <option value="0">2</option>
    <option value="0">3</option>
    <option value="0">4</option>
    <option value="0">5</option>
    <option value="0">6</option>
    </select></td>

  6. #6
    Join Date
    Oct 2013
    Posts
    517
    Quote Originally Posted by trifolium View Post
    I am no expert just need to get my head around it all again.
    I'm smellin' what you're steppin' in. There's lots of lines and numbers!

  7. #7
    Join Date
    Mar 2014
    Posts
    47
    Thanks kevin, this is exactly what I was looking for. You are a master :-)

    Now I just have alot of inputting to be doing to get it all to work how I want.

    Can you tell me this do you know if it is possible for me to install this on any free websites out there or will I have to use an individual website?

  8. #8
    Join Date
    Oct 2013
    Posts
    517
    It's just HTML and JavaScript so you should be able to use it anywhere. Upload and see.

    Hmm, "master".... yeah right....

  9. #9
    Join Date
    Mar 2014
    Posts
    47
    Quote Originally Posted by Kevin2 View Post
    It's just HTML and JavaScript so you should be able to use it anywhere. Upload and see.

    Hmm, "master".... yeah right....
    Well it would have taken me for ever to get my head around it all.

    I knew in my head it had to be straight forward to code but just had no idea where to start. Where are you based?

  10. #10
    Join Date
    Oct 2013
    Posts
    517
    Illinois, USA

  11. #11
    Join Date
    Mar 2014
    Posts
    47
    Thanks for your time with this it is much appreciated. Have you any interest in horse racing? Also is there anyway of changing the code so that it highlight the totals box for percentage if it is over 60%

  12. #12
    Join Date
    Oct 2013
    Posts
    517
    Regarding racing, not really. We have a track about 15 miles from where I live. Only been there once, and that was many years ago. I kind of pay attention to the Kentucky Derby just so I don't sound like an idiot the next day.

    Highlighting:
    Add this underneath the <title> in the <head>
    HTML Code:
       <style>
       .highlight{
    	background-color:yellow;
       }
       </style>
    Change the color to something else if you like.

    And change this line (way down near the bottom of the HTML):
    HTML Code:
    	<td><input type="text" size="3" readonly id="perc" /></td>
    to this:
    HTML Code:
    	<td><input type="text" size="3" readonly id="perc" class="" /></td>
    Now, in the JavaScript (again near the end) find this line:
    Code:
     sum(tperc,ttperc,sperc);
    and add this right below it, and before the function's closing "}":
    Code:
     if (document.getElementById("perc").value >= '60') {
         document.getElementById("perc").className = 'highlight';
     }else{
         document.getElementById("perc").className = ''; 
     }
    The last few lines of that function should now look like this:
    Code:
     sum(tperc,ttperc,sperc);
     if (document.getElementById("perc").value >= '60') {
         document.getElementById("perc").className = 'highlight';
     }else{
         document.getElementById("perc").className = ''; 
     }
    }
    Note that the "break point" is 60%. If the total is greater than or equal to 60% the highlight will be triggered. if you want greater than only change ">=" to ">".

  13. #13
    Join Date
    Mar 2014
    Posts
    47
    Excellent thank you

  14. #14
    Join Date
    Mar 2014
    Posts
    47
    I want to remove runners, age, favourite from the code but still want it to calculate correctly.

    How do I do this without affecting the code: here is the code so far.

    Code:
    function track(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
                 case 'Sedgefield' :
    	oneone.value='2';
    	onetwo.value='5';
    	onethree.value='3';
    	onefour.value='5';
    	onefive.value='1';
    	onesix.value='5';
    	twoone.value='2';
    	twotwo.value='2';
    	twothree.value='1';
    	twofour.value='2';
    	twofive.value='3';
    	twosix.value='2';
    	perc.value='8.75';
         break;
         default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
    	twoone.value='';
    	twotwo.value='';
    	twothree.value='';
    	twofour.value='';
    	twofive.value='';
    	twosix.value='';
    	perc.value='';
         break;
       }
       total();
    }
    
    function ty(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
         case 'Handicap':
    	oneone.value='2';
    	onetwo.value='3';
    	onethree.value='2';
    	onefour.value='3';
    	onefive.value='3';
    	onesix.value='3';
    	twoone.value='4';
    	twotwo.value='0';
    	twothree.value='4';
    	twofour.value='1';
    	twofive.value='2';
    	twosix.value='1';
    	perc.value='10';
         break;
          default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
    	twoone.value='';
    	twotwo.value='';
    	twothree.value='';
    	twofour.value='';
    	twofive.value='';
    	twosix.value='';
    	perc.value='';
         break;
       }
       total();
    }
    
    function going(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
         case 'Soft':
    	oneone.value='2';
    	onetwo.value='3';
    	onethree.value='2';
    	onefour.value='4';
    	onefive.value='1';
    	onesix.value='4';
    	twoone.value='2';
    	twotwo.value='2';
    	twothree.value='2';
    	twofour.value='1';
    	twofive.value='2';
    	twosix.value='1';
    	perc.value='7.5';
         break;
         default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
    	twoone.value='';
    	twotwo.value='';
    	twothree.value='';
    	twofour.value='';
    	twofive.value='';
    	twosix.value='';
    	perc.value='';
         break;
       }
       total();
    }
    
    function cl(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
              case '1':
    	oneone.value='3';
    	onetwo.value='2';
    	onethree.value='2';
    	onefour.value='4';
    	onefive.value='2';
    	onesix.value='4';
    	twoone.value='2';
    	twotwo.value='3';
    	twothree.value='3';
    	twofour.value='1';
    	twofive.value='2';
    	twosix.value='1';
    	perc.value='7.5';
         break;
                default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
    	twoone.value='';
    	twotwo.value='';
    	twothree.value='';
    	twofour.value='';
    	twofive.value='';
    	twosix.value='';
    	perc.value='';
         break;
       }
       total();
    }
    
    function distance(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
         case '12f':
    	oneone.value='0';
    	onetwo.value='4';
    	onethree.value='0';
    	onefour.value='5';
    	onefive.value='0';
    	onesix.value='5';
    	twoone.value='3';
    	twotwo.value='2';
    	twothree.value='3';
    	twofour.value='1';
    	twofive.value='2';
    	twosix.value='0';
    	perc.value='7.5';
         break;
            default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
    	twoone.value='';
    	twotwo.value='';
    	twothree.value='';
    	twofour.value='';
    	twofive.value='';
    	twosix.value='';
    	perc.value='';
         break;
       }
       total();
    }
    
    function runners(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
         case '5':
    	oneone.value='3';
    	onetwo.value='6';
    	onethree.value='3';
    	onefour.value='6';
    	onefive.value='2';
    	onesix.value='7';
    	twoone.value='5';
    	twotwo.value='2';
    	twothree.value='5';
    	twofour.value='2';
    	twofive.value='6';
    	twosix.value='1';
    	perc.value='10';
         break;
          case '10' :
    	oneone.value='2';
    	onetwo.value='1';
    	onethree.value='1';
    	onefour.value='2';
    	onefive.value='1';
    	onesix.value='2';
    	twoone.value='1';
    	twotwo.value='2';
    	twothree.value='1';
    	twofour.value='0';
    	twofive.value='1';
    	twosix.value='0';
    	perc.value='3.75';
         break;
         default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
    	twoone.value='';
    	twotwo.value='';
    	twothree.value='';
    	twofour.value='';
    	twofive.value='';
    	twosix.value='';
    	perc.value='';
         break;
       }
       total();
    }
    
    function age(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
         case '3':
    	oneone.value='2';
    	onetwo.value='3';
    	onethree.value='2';
    	onefour.value='5';
    	onefive.value='2';
    	onesix.value='4';
    	twoone.value='3';
    	twotwo.value='2';
    	twothree.value='1';
    	twofour.value='0';
    	twofive.value='1';
    	twosix.value='1';
    	perc.value='7.5';
         break;
           case '7':
    	oneone.value='0';
    	onetwo.value='2';
    	onethree.value='1';
    	onefour.value='1';
    	onefive.value='0';
    	onesix.value='2';
    	twoone.value='1';
    	twotwo.value='1';
    	twothree.value='1';
    	twofour.value='2';
    	twofive.value='3';
    	twosix.value='1';
    	perc.value='3.75';
         break;
         default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
    	twoone.value='';
    	twotwo.value='';
    	twothree.value='';
    	twofour.value='';
    	twofive.value='';
    	twosix.value='';
    	perc.value='';
         break;
       }
       total();
    }
    
    function favourite(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
         case '3/1':
    	oneone.value='0';
    	onetwo.value='0';
    	onethree.value='1';
    	onefour.value='0';
    	onefive.value='1';
    	onesix.value='0';
    	twoone.value='5';
    	twotwo.value='2';
    	twothree.value='3';
    	twofour.value='3';
    	twofive.value='3';
    	twosix.value='3';
    	perc.value='6.25';
         break;
            default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
    	twoone.value='';
    	twotwo.value='';
    	twothree.value='';
    	twofour.value='';
    	twofive.value='';
    	twosix.value='';
    	perc.value='';
         break;
       }
       total();
    }
    
    /* Totals */
    
    function total(){
     var t11 = document.getElementsByClassName("FTw1"),
         t12 = document.getElementsByClassName("FBw1"),
         t13 = document.getElementsByClassName("FTp1"),
         t14 = document.getElementsByClassName("FBp1"),
         t15 = document.getElementsByClassName("FTt1"),
         t16 = document.getElementsByClassName("FBt1"),
         t21 = document.getElementsByClassName("FTw2"),
         t22 = document.getElementsByClassName("FBw2"),
         t23 = document.getElementsByClassName("FTp2"),
         t24 = document.getElementsByClassName("FBp2"),
         t25 = document.getElementsByClassName("FTt2"),
         t26 = document.getElementsByClassName("FBt1"),
         tperc = document.getElementsByClassName("perc"),
         t1 = document.getElementById("FTw1").value,
         t2 = document.getElementById("FBw1").value,
         t3 = document.getElementById("FTp1").value,
         t4 = document.getElementById("FBp1").value,
         t5 = document.getElementById("FTt1").value,
         t6 = document.getElementById("FBt1").value,
         tt1 = document.getElementById("FTw2").value,
         tt2 = document.getElementById("FBw2").value,
         tt3 = document.getElementById("FTp2").value,
         tt4 = document.getElementById("FBp2").value,
         tt5 = document.getElementById("FTt2").value,
         tt6 = document.getElementById("FBt2").value,
         ttperc = document.getElementById("perc").value,
         s11 = "FTw1",
         s12 = "FBw1",
         s13 = "FTp1",
         s14 = "FBp1",
         s15 = "FTt1";
         s16 = "FBt1";
         s21 = "FTw2",
         s22 = "FBw2",
         s23 = "FTp2",
         s24 = "FBp2",
         s25 = "FTt2";
         s26 = "FBt2";
         sperc = "perc";
     sum(t11,t1,s11);
     sum(t12,t2,s12);
     sum(t13,t3,s13);
     sum(t14,t4,s14);
     sum(t15,t5,s15);
     sum(t16,t6,s16);
     sum(t21,tt1,s21);
     sum(t22,tt2,s22);
     sum(t23,tt3,s23);
     sum(t24,tt4,s24);
     sum(t25,tt5,s25);
     sum(t26,tt6,s26);
     sum(tperc,ttperc,sperc);
    }
    
    function sum(c,t,s){
     t = '0';
     for(var i = 0; i < c.length; i++){
      var a = c[i].value,
          b = 1*a+1*t;
      t = b;
      document.getElementById(s).value = t;
     }
    }

  15. #15
    Join Date
    Oct 2013
    Posts
    517
    The nice thing about the functions that do the calculations is that they don't depend on knowing how many items need to be totalled. It doesn't matter whether you have 5 or 500. Remove the associated table rows and things should work just fine. No need to mess with the script unless you really want to delete the functions affecting those rows. They can be left as-is with no harm, however.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles