SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Don't know how to output this array

    I am using my PHP skills to understand how JS works and have been able to figure out a lot. However, I'm stumped by how to output the results to a form's text field where an array is involved.

    I'll give you the full code (which has not been finalized yet), but in a nutshell, I'm applying calculations to an array of integers. The user chooses the array he wants to calculate, and the arrays all have a different amount of integers in them. After each calculation I round up and down the numbers and calculate them again. After that, I output the results of each number to a text field. That's where I encounter the difficulty. Here's the code. I separated out the troubling line and put ?? with it.

    Note that this has not been tested yet. I have no idea whether this first draft will even work.

    HTML Code:
    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'];
        };
    
    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 -->
    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; 
    while (i <= L) { 
    var pinionUP . i = Math.ceil(pinion . i);
    var pinionDOWN . i = Math.floor(pinion . i);
    i++; <!-- up the increment -->
    }
    
    <!-- divide new spur/pinion combinations to get new ratios -->
    var i = 0; // start the increment count
    while (i <= L) { 
    var ratioUP . i = spurs[i] / pinionUP . i;
    var ratioDOWN . i = spurs[i] / pinionDOWN . i;
    i++; 
    }
    
    <!-- display results to user -->
    var i = 0; 
    var original = "Original ratio: " . ratio;
    var try = " Try: ";
    
    while (i <= L) { 
    display . i = spurs[i] . i . "/" . pinionUP . i . " = " . ratioUP . i. ", " . spurs[i] . "/" . pinionDOWN . i . " = " . ratioDOWN . i. ", ";
    
    
    
    
    form.elements.moreRatios.value = ??
    
    
    
    i++;
    }
    } <!-- end of function -->
    
    var buttonNewRatios = document.getElementById('buttonNewsRatios');
    buttonNewRatios.onclick = function () {
    var form = document.getElementByID('form2');
    alternateRatios(form);
    };

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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.

    Code:
    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'];
            SyntaxError: unterminated string literal
        };
        lint warning: missing break statement for last case in switch
        lint warning: empty statement or extra semicolon
    
    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 -->
    SyntaxError: missing ; before statement
    
    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; 
    warning: redeclaration of var i
    while (i <= L) { 
    var pinionUP . i = Math.ceil(pinion . i);
    SyntaxError: missing ; before statement
    [/B][/color]
    var pinionDOWN . i = Math.floor(pinion . i);
    SyntaxError: missing ; before statement
    [/B][/color]
    i++; <!-- up the increment -->
    }
    
    <!-- divide new spur/pinion combinations to get new ratios -->
    var i = 0; // start the increment count
    warning: redeclaration of var i
    while (i <= L) { 
    var ratioUP . i = spurs[i] / pinionUP . i;
    SyntaxError: missing ; before statement
    var ratioDOWN . i = spurs[i] / pinionDOWN . i;
    SyntaxError: missing ; before statement
    i++; 
    }
    
    <!-- display results to user -->
    var i = 0; 
    warning: redeclaration of var i
    var original = "Original ratio: " . ratio;
    SyntaxError: missing ; before statement
    var try = " Try: ";
    SyntaxError: missing variable name
    while (i <= L) { 
    display . i = spurs[i] . i . "/" . pinionUP . i . " = " . ratioUP . i. ", " . spurs[i] . "/" . pinionDOWN . i . " = " . ratioDOWN . i. ", ";
    SyntaxError: missing name after . operator
    
    
    
    
    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:

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

    Code javascript:
    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:

    Code javascript:
    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 + ', ' + "\n';
        }
        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 + "\n" + 
            '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.
    Last edited by paul_wilkins; May 31, 2011 at 16:13.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow! I come home from a long weekend to find a fantastic present on my doorstep! You're right, it doesn't work as written -- I'll figure out why. But it is 1:10 the size of the alternate I figured on using (a series of if statements with the entire code written over and over with the values filled in) before I saw your version. Thank you so much for this gift!

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm still trying to find out why no values display. All the buttons and text fields are correctly linked in the code. The code checks out perfectly in JSHint. Not yet finished.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by StevenHu View Post
    I'm still trying to find out why no values display. All the buttons and text fields are correctly linked in the code. The code checks out perfectly in JSHint. Not yet finished.
    The code was created with no testing involved, due to having no access to anything that can work in the web browser.

    Do you have a test page of a previously working version that you can link to, or provide here? From that working older code progress can then be made.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, my working code was replaced later by unworking code when I tried to "improve" on it. However, here is the HTML and Javascript that goes right above the code you gave me:

    HTML Code:
    	<div class="pageitem"><div class="textbox">
    
    <table border="0" cellpadding="5" cellspacing="0" width="100%">
    <tr>
    <td class="alignright">
    <form id="formGearRatio">Spur Gear <input class="display3" type="number" size="14" value="" name="a"> 
    </td></tr>
    <tr>
    <td class="alignright">
    Pinion Gear <input class="display3" type="number" size="14" value="" name="b"> 
    </td></tr>
    <tr>
    <td class="alignright">
    <input id="divide" class="buttPress2" type="button" value="Ratio =">  
    <input class="display2" size="4" type="text" value="" name="ans">:1  
    </td></tr></form></table>
    </center></p>
    	</div></div> 
    
    
    	<div class="pageitem"><div class="textbox">
    <p>Choose the range of spurs for alternate gearing approximating your ratio.<br>
    <center>
    <table border="0" cellpadding="5" cellspacing="0" width="100%">
    <tr>
    <td class="alignright">
    <form id="form2">
    <select class="displayLength" name="ratio" size="6">
    <option value=sc10_4x4>SC10 4x4: 58, 60, 62, 93</option> 
    <option value=sc10>SC10: 75, 78, 81, 84, 87</option> 
    <option value=sc8>SC8: 50, 52, 54</option> 
    <option value=b44>B44: 72, 75, 78, 81, 84</option> 
    <option value=b4t4>B4, T4: 72, 75, 78, 81, 84, 87</option> 
    <option value=gt2>GT2: 54, 55, 56</option> 
    </select>
    </td></tr>
    <tr>
    <td class="alignright">
    <input id="buttonNewRatios" class="buttPress2" type="button" value="Alternates"><br><br>
    <input class="displayLength" size="7" type="text" value="" name="moreRatios">  
    </td></tr></form></table>
    
    	</div></div> 
    
    </div> <!-- contents -->
    
    
    <script language="JavaScript">
    
    function sanitizeNumber() {
        // restrict to digits only
        this.value = /\d+/.exec(this.value);
        // size check
        if (this.value < 1) {
            this.value = "not valid";
    	}
        if (this.value > 200) {
            this.value = "not valid";
    	}
    }
     
    function a_div_b(form) {
    var a = form.elements.a.value,
        b = form.elements.b.value,
        c = a / b;
        form.elements.ans.value = c;
    }
     
    var form = document.getElementById('formGearRatio');
    form.elements.a.onchange = sanitizeNumber;
    form.elements.b.onchange = sanitizeNumber;
    
    divide.onclick = function () {
        a_div_b(form);
    }

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The first error that I'm getting is "Cannot set property 'onclick' of null" which is due to the divide.onclick part.

    Use this instead:

    Code javascript:
    document.getElementById('divide').onclick = ...

    The other error comes from this original code:

    Code:
    var buttonNewRatios = document.getElementById('buttonNewsRatios');
    There is no 'buttonNewsRatios' identifier. There is instead a 'buttonNewRatios' identifier.

    So the following will work with that:

    Code javascript:
    var buttonNewRatios = document.getElementById('buttonNewRatios');

    Also, it wasn't known that there are multiple forms, so the "ans" field needs to come from a different form:

    Code javascript:
    var ratioForm = document.getElementById('formGearRatio'),
        form = document.getElementById('form2'),
        ratio = ratioForm.elements.ans.value, // the result field that returned the user's spur and pinion input calculation
        ...

    Finally, the alternates can be quite a long list, so I presumed that a textarea was used to display the info:

    Code html4strict:
    <textarea name="moreRatios" cols="65" rows="5"></textarea>

    With which you'll need to put the \n parts in double quotes instead of single quotes:

    Code javascript:
    alternates += ... + ', ' + "\n";
    ...
    form.elements.moreRatios.value = 'Original ratio: ' + ratio + "\n" + ...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Putting all the JS through JSHint, I'm told of a missing semi-colon on line 30. You pointed this out as a problem early on (on a different line), but I had no clue as to how JS uses semi-colons, so I could not see it. Not the same as PHP!

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    That missing semicolon is from this set of code:

    Code:
    divide.onclick = function () {
        a_div_b(form);
    }
    The end of the assignment statement is where the semicolon is put.

    Code javascript:
    divide.onclick = function () {
        a_div_b(form);
    };

    The javascript interpretor will do that automatically anyway thanks to automatic semicolon insertion, but it's best to provide them where they're required so that automatic mistakes don't have an opportunity to occur.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK, the JSHint is flawless! However, still no readout. I'll double-checked the JS:

    HTML Code:
    function sanitizeNumber() {
        // restrict to digits only
        this.value = /\d+/.exec(this.value);
        // size check
        if (this.value < 1) {
            this.value = "not valid";
    	}
        if (this.value > 200) {
            this.value = "not valid";
    	}
    }
     
    function a_div_b(form) {
    var a = form.elements.a.value,
        b = form.elements.b.value,
        c = a / b;
        form.elements.ans.value = c;
    }
    
    var form = document.getElementById('formGearRatio');
    form.elements.a.onchange = sanitizeNumber;
    form.elements.b.onchange = sanitizeNumber;
    
    document.getElementById('divide').onclick = function () {
        a_div_b(form);
    };
        
        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 + ", \n";
            }
            return alternates;
        }
        
        var buttonNewRatios = document.getElementById('buttonNewRatios');
        buttonNewRatios.onclick = function () {
            var ratioForm = document.getElementByID('formGearRatio'),
            form = document.getElementByID('form2'),
            ratio = ratioForm.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 + "\n" + 
            'Try: ' + alternates;
        };
    Time for me to knock off work!

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    getElementByID needs to be getElementById

    I see you like jshint. You may want to also look at jslint with "the good parts" turned on if you want to get really nitty gritty with the code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I meant JSHint, not JSLint (you had warned me about it!) I made the ID / Id change and still nothing is showing in the text field.

    JSLint tells me, with the good parts on, that ratioForm is unused, and document is not defined. The rest is nit-picking about indenting code.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by StevenHu View Post
    still nothing is showing in the text field.
    Is that an input field or a textarea field that you are using?
    The results can be quite long, so a text area seems to be the better choice there.

    I do have a working demo of it here, but I'd like to see what your current code looks like so that you can learn from it. Do you have a test page that you can link to?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    We seem to be calling the same form two different vars:

    var form = document.getElementById('formGearRatio');

    and:
    var ratioForm = document.getElementByID('formGearRatio'),

  15. #15
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Is that an input field or a textarea field that you are using?
    The results can be quite long, so a text area seems to be the better choice there.

    I do have a working demo of it here, but I'd like to see what your current code looks like so that you can learn from it. Do you have a test page that you can link to?
    I am using a textarea, sorry for the mixup in terms. I'm creating this in Xcode on the Mac for the iPhone, so it's not online. I'm glad you have a working version! I thought I had carefully implemented your changes. I'll double-check.

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by StevenHu View Post
    We seem to be calling the same form two different vars:

    var form = document.getElementById('formGearRatio');

    and:
    var ratioForm = document.getElementByID('formGearRatio'),
    Those are used in different places, so they won't affect each other.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by StevenHu View Post
    I am using a textarea, sorry for the mixup in terms. I'm creating this in Xcode on the Mac for the iPhone, so it's not online. I'm glad you have a working version! I thought I had carefully implemented your changes. I'll double-check.
    Then provide some way for us to see what you are doing. You can attach it to your post as a file, if you must.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is the code. It's actually an HTML file, but the upload said it was invalid. So I'm uploading as a zip: 0511.zip.
    Attached Files Attached Files
    Last edited by paul_wilkins; Jun 1, 2011 at 14:35. Reason: Removed attached doc file and replaced with a zipped html

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You still have a getElementByID in there, which needs to instead be getElementById
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    LOL! I thought there was just one!

    I'm not getting the results I expected. For instance, if the array contained spurs of 72, 75, 78, 81, 84, then I would expect the results to give me the same spur range, but different pinions, for example, 87/26 = 3.346, 87/27 = 3.222. The floor and ceiling was supposed to apply to the pinion tooth amount, rounding up and rounding down, but still keeping the same spurs.

    Instead I am getting 720/23, 751/24, 782/25 -- no one uses spur gears containing 720 teeth! Somewhere our approach went off, although the ratio numbers are very similar to the original ratio, which is good.

    Among the results are good numbers, like 78/24, 81/25, and 84/26, in which the first number is the same as the number in the array, and the divided/by results with numbers similar to the ratio numbers -- which is the useful numbers we want. Numbers outside the array are not acceptable because spur gears are not available or appropriate for that application.

  21. #21
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If I choose SC8: 50, 52, 54, then none of the numbers are appropriate, since none are numbers found in the array (720/36, 72/36, etc.)

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Look at this part of the code;

    Code:
    spurs[i] + i + '/' + pinionUp
    That + i part should not be there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you type in 50 for Spur then 17 for rPinion, you get a ratio of 2.94117.
    Then you choose "SC8: 50, 52, 54" because that has a spur the same as the one you put in the top Spur box. However, none of the results give me a spur found in that array. It gives me the default spur array.

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Currently your gearSpurs function is called using the calculated ratio.

    Code:
    spurs = gearSpurs(ratio),
    That's no good - as you need to pass the ratio range from the selection box instead.

    Code javascript:
    spurs = gearSpurs(form.elements.ratio.value),
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    THOSE are the results I expected! Now I'll do some homework and see how to limit the decimals to 2 places. Thanks for your help!


Bookmarks

Posting Permissions

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