Confused Editing Code

This site is best viewed in a modern browser with JavaScript enabled.

trifolium

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

[B][I]<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>[/I][/B]

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,perc){
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;

Kevin2

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.

trifolium

Kevin2;1321315 wrote:
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?

trifolium

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.

Kevin2

<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 -->
[B][I][COLOR="#FF0000"]<option value="1">1</option>[/COLOR][/I][/B]
<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>

Kevin2

trifolium;1321319 wrote:
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!

trifolium

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?

Kevin2

It's just HTML and JavaScript so you should be able to use it anywhere. Upload and see.

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

trifolium

Kevin2;1321327 wrote:
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?

Kevin2

Illinois, USA

trifolium

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%

Kevin2

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>

   <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):

	<td><input type="text" size="3" readonly id="perc" /></td>

to this:

	<td><input type="text" size="3" readonly id="perc" class="" /></td>

Now, in the JavaScript (again near the end) find this line:

 sum(tperc,ttperc,sperc);

and add this right below it, and before the function's closing "}":

 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:

 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 ">".

trifolium

Excellent thank you

trifolium

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.

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;
 }
}

Kevin2

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.

trifolium

Thanks Kevin, would you take a look at my other thread regarding new coding problem, could u help please