Let’s start with some basics.
Run your javscript code through the online lint to find the most obvious problems.
Here’s the old code, with suggested fixes from online lint highlighted highlighted.
var ans = document.getElementById('ans'); // this is the result that comes from a prior calculation. It's the basis of the new calculations.
var ratio = form.elements.ans.value; // the result field that returned the user's spur and pinion input calculation
var choiceSpurs;
<!-- evaluate the spur gear list choice from drop-down menu, and establish the array of spurs to calculate -->
switch (choiceSpurs)
{
case (choiceSpurs=='sc10_4x4'):
choiceSpurs = "spurs['58', '60', '62', '93']";
break;
case (choiceSpurs=='sc10'):
choiceSpurs = "spurs['75', '78', '81', '84', '87']";
break;
case (choiceSpurs=='sc8'):
choiceSpurs = "spurs['50', '52', '54']";
break;
case (choiceSpurs=='b44'):
choiceSpurs = "spurs['72', '75', '78', '81', '84']";
break;
case (choiceSpurs=='b4t4'):
choiceSpurs = "spurs['72', '75', '78', '81', '84', '87']";
break;
case (choiceSpurs=='gt2'):
choiceSpurs = "spurs['54', '55', '56']";
break;
default: "spurs['72', '75', '78', '81', '84', '87'];
[color="red"][B]SyntaxError: unterminated string literal[/B][/color]
};
[color="red"][B]lint warning: missing break statement for last case in switch[/B][/color]
[color="red"][B]lint warning: empty statement or extra semicolon[/B][/color]
var spurArrayLength = choiceSpurs.length; <!-- get the number of items in the array -->
function alternateRatios () {
var L = spurArrayLength - 1; // get the count of the array; subtract 1 to assume length starts at zero like array does
var i = 0; <!-- start the increment count at zero because it'll also be used to point to the object in the array, which starts counting at zero -->
while (i <= L) { <!-- while the count is still within the range of objects in the choiceSpurs array... -->
var pinion . i = spurs[i] / ratio; <!-- ... divide the array's spur tooth count by the ratio -->
[color="red"][B]SyntaxError: missing ; before statement[/B][/color]
i++; // up the increment and work on the next object in the array
}
<!-- round up and round down each of the results to get the pinion tooth count -->
var i = 0;
[color="red"][B]warning: redeclaration of var i[/B][/color]
while (i <= L) {
var pinionUP . i = Math.ceil(pinion . i);
[color="red"][B]SyntaxError: missing ; before statement[/B][/color]
[/B][/color]
var pinionDOWN . i = Math.floor(pinion . i);
[color="red"][B]SyntaxError: missing ; before statement[/B][/color]
[/B][/color]
i++; <!-- up the increment -->
}
<!-- divide new spur/pinion combinations to get new ratios -->
var i = 0; // start the increment count
[color="red"][B]warning: redeclaration of var i[/B][/color]
while (i <= L) {
var ratioUP . i = spurs[i] / pinionUP . i;
[color="red"][B]SyntaxError: missing ; before statement[/B][/color]
var ratioDOWN . i = spurs[i] / pinionDOWN . i;
[color="red"][B]SyntaxError: missing ; before statement[/B][/color]
i++;
}
<!-- display results to user -->
var i = 0;
[color="red"][B]warning: redeclaration of var i[/B][/color]
var original = "Original ratio: " . ratio;
[color="red"][B]SyntaxError: missing ; before statement[/B][/color]
var try = " Try: ";
[color="red"][B]SyntaxError: missing variable name[/B][/color]
while (i <= L) {
display . i = spurs[i] . i . "/" . pinionUP . i . " = " . ratioUP . i. ", " . spurs[i] . "/" . pinionDOWN . i . " = " . ratioDOWN . i. ", ";
[color="red"][B]SyntaxError: missing name after . operator[/B][/color]
form.elements.moreRatios.value = ??
i++;
}
} <!-- end of function -->
var buttonNewRatios = document.getElementById('buttonNewsRatios');
buttonNewRatios.onclick = function () {
var form = document.getElementByID('form2');
alternateRatios(form);
};
Some of those errors don’t make sense, due to the checker not knowing what you’re tying to attempt there.
The “missing ; before statement” and “missing name after . operator” errors are because the fullstop does not perform concatenation in javascript. The plus symbol performs that duty instead, or because you should be using an array index instead.
You cannot access array items using the PHP concatenator.
pinion . i
You need to ensure that the array exists first, and use the array index notation instead:
var pinion = ;
…
pinion[i]
The “redeclaration of var i” warnings don’t just mean that you remove the var declaration. When you declare them in the middle of a function JavaScript automatically hoists them to the top of the function anyway, so put them at the top to help remove any confusion that you might have.
Javascript also has something called a for loop, which helps you to easily loop over arrays. So instead of this:
var L = spurArrayLength - 1; // get the count of the array; subtract 1 to assume length starts at zero like array does
var i = 0; <!-- start the increment count at zero because it'll also be used to point to the object in the array, which starts counting at zero -->
while (i <= L) { <!-- while the count is still within the range of objects in the choiceSpurs array... -->
var pinion . i = spurs[i] / ratio; <!-- ... divide the array's spur tooth count by the ratio -->
i++; // up the increment and work on the next object in the array
}
You would instead do this:
var i;
...
for (i = 0; i < spurArrayLength, i += 1) {
pinion[i] = spurs[i] / ratio;
}
The “missing variable name” error is because “try” is a reserved name. It’s used for try/catch blocks of code.
Do not use HTML comments within your script. They will break as soon as you put your code in an external script file. Use single-line or multi-line comments instead with // and /…/
And try to avoid restating in your comments what the code is doing. Instead, limit your comments to explain why.
Fixing those problems though don’t mean that your code is going to work. It does help to weed out the most obvious problems though.
So, you can also use jslint to find other problems (there are a lot, so I won’t list them here) and finally you can turn on “The Good Parts” at jslint so that you can make your code all clean and shiny.
Instead of looping many times over the same array, I combined them all in to just one loop, which helped to remove the need for vast amounts of array storage.
I also adjusted a few variable names so that they more closely follow standard javascript code conventions.
Here’s what the code looks like after all of that:
function gearSpurs(ratio) {
var spurs = [];
// evaluate the spur gear choice, and establish the array of spurs to calculate
switch (ratio) {
case 'sc10_4x4':
spurs = ['58', '60', '62', '93'];
break;
case 'sc10':
spurs = ['75', '78', '81', '84', '87'];
break;
case 'sc8':
spurs = ['50', '52', '54'];
break;
case 'b44':
spurs = ['72', '75', '78', '81', '84'];
break;
case 'b4t4':
spurs = ['72', '75', '78', '81', '84', '87'];
break;
case 'gt2':
spurs = ['54', '55', '56'];
break;
default:
spurs = ['72', '75', '78', '81', '84', '87'];
break;
}
return spurs;
}
function alternateRatios(spurs, ratio) {
var pinion = 0,
pinionUp = 0,
pinionDown = 0,
ratioUp = 0,
ratioDown = 0,
i,
spursLen = spurs.length,
alternates = '';
for (i = 0; i < spursLen; i += 1) {
pinion = spurs[i] / ratio;
// get the pinion tooth count
pinionUp = Math.ceil(pinion);
pinionDown = Math.floor(pinion);
// get new ratios
ratioUp = spurs[i] / pinionUp;
ratioDown = spurs[i] / pinionDown;
alternates += spurs[i] + i + '/' + pinionUp + ' = ' + ratioUp + ', ' + spurs[i] + '/' + pinionDown + ' = ' + ratioDown + ', ' + "\
';
}
return alternates;
}
var buttonNewRatios = document.getElementById('buttonNewsRatios');
buttonNewRatios.onclick = function () {
var form = document.getElementById('form2'),
ratio = form.elements.ans.value, // the result field that returned the user's spur and pinion input calculation
spurs = gearSpurs(ratio),
alternates = alternateRatios(spurs, ratio);
form.elements.moreRatios.value = 'Original ratio: ' + ratio + "\
" +
'Try: ' + alternates;
};
I don’t know how your form is structured so there’s no way to test of the above code works or not, but it’s a lot closer to working now than it was before.
