HELP! html gear ratio calculator code

I need help writing code for a gear ratio calculator. The user will input the teeth count of different gears into input boxes. Unused boxes will be left blank. I need to calculate the gear ratio using the info from the input boxes. There will be 5 boxes. The equation to calculate a gear ratio is Gear ratio = Teeth count of gear 2 / Teeth count of gear 1. If there are multiple gears then only use the first and last ones. This will give you a fraction or if you divide it it will give you a decimal. I then need to convert the decimal or fraction into a ratio. An example ratio would be 3:5.37.

Do you want someone to do this for you? Because I really don’t think people will just write your code for free. But if you have already tried to start it and can post your code here, I’m sure you will get some help with what you have done. How much have you done so far?

This is the code so far. I copied most of it from the internet. That’s why it has things like “fishweight” and only two inputs.

<title>Gear Ratio Calculator</title>
</head>

<body>
<form id="fishWeight" action="">
<fieldset>
	<legend>Gear Ratio Calculator</legend>
	<p>
		<label for="length">First Gear (in)</label>
		<input id="length" name="length" type="number" />
	</p><br><br>
	<p>
		<label for="girth">Second Gear</label>
		<input id="girth" name="girth" type="number" />
	</p><br>
	<p>
		<input type="submit" value="Calculate FPS" />
		or
		<input type="reset" value="Reset" />
	</p><br><br><br>
	<p>
		<label for="weight">Ratio</label>
		<input id="weight" name="weight" type="number" />
	</p>
</fieldset>
</form>

<script>
(function () {
	function calculateFishWeight(length, girth) {
		length = parseFloat(length);
		girth = parseFloat(girth);
		return (girth / length);
	}

	var fishWeight = document.getElementById("fishWeight");
	if (fishWeight) {
		fishWeight.onsubmit = function () {
			this.weight.value = calculateFishWeight(this.length.value, this.girth.value);
			return false;
		};
	}
}());
</script>
</body>
</html>

Complicated problems are solved by breaking them down into a series of smaller, more manageable problems. Let’s see what this would give you:

Let’s start at the beginning. Can you make a basic HTML page with the appropriate form/input elements and post it here.

2 Likes

To help you out, here is your code with the fishy names renamed to something more appropriate for gear ratios.

<form id="gearRatio" action="">
  <fieldset>
    <legend>Gear Ratio Calculator</legend>
    <p>
      <label for="gear1">First Gear</label>
      <input id="gear1" name="gear1" type="number" />
    </p><br><br>
    <p>
      <label for="gear2">Second Gear</label>
      <input id="gear2" name="gear2" type="number" />
    </p><br>
    <p>
      <input type="submit" value="Calculate Ratio" /> or
      <input type="reset" value="Reset" />
    </p><br><br><br>
    <p>
      <label for="ratio">Ratio</label>
      <input id="ratio" name="ratio" />
    </p>
  </fieldset>
</form>
(function() {
  function calculateRatio(gear1, gear2) {
    gear1 = parseFloat(gear1);
    gear2 = parseFloat(gear2);
    return (gear2 / gear1);
  }

  var form = document.getElementById("gearRatio");
  if (form) {
    form.onsubmit = function() {
      this.ratio.value = calculateRatio(this.gear1.value, this.gear2.value);
      return false;
    };
  }
}());

Actually, let’s take things further, with five gears on the form.

<form id="gearRatio" action="">
  <fieldset>
    <legend>Gear Ratio Calculator</legend>
    <p>
      <label for="gear1">First Gear</label>
      <input id="gear1" name="gear1" type="number" />
    </p><br><br>
    <p>
      <label for="gear2">Second Gear</label>
      <input id="gear2" name="gear2" type="number" />
    </p><br>
    <p>
      <label for="gear3">Third Gear</label>
      <input id="gear3" name="gear3" type="number" />
    </p><br>
    <p>
      <label for="gear4">Fourth Gear</label>
      <input id="gear4" name="gear4" type="number" />
    </p><br>
    <p>
      <label for="gear5">Fifth Gear</label>
      <input id="gear5" name="gear5" type="number" />
    </p><br>
    <p>
      <input type="submit" value="Calculate Ratio" /> or
      <input type="reset" value="Reset" />
    </p><br><br><br>
    <p>
      <label for="ratio">Ratio</label>
      <input id="ratio" name="ratio" />
    </p>
  </fieldset>
</form>

We can pass those gears in to the functions now:

function calculateRatio(gear1, gear2, gear3, gear4, gear5) {
    gear1 = parseFloat(gear1);
    gear2 = parseFloat(gear2);
    gear3 = parseFloat(gear3);
    gear4 = parseFloat(gear4);
    gear5 = parseFloat(gear5);
    return (gear2 / gear1);
}
...
form.onsubmit = function() {
    this.ratio.value = calculateRatio(this.gear1.value, this.gear2.value, this.gear3.value, this.gear4.value, this.gear5.value);
    return false;
};

But that doesn’t do much with the extra ratios.

Is it correct for me to believe that each extra ratio results in the new gear being divided by the current ratio?
We will need to store the current ratio for that to occur:

function calculateRatio(gear1, gear2, gear3, gear4, gear5) {
    var ratio;
    gear1 = parseFloat(gear1);
    gear2 = parseFloat(gear2);
    gear3 = parseFloat(gear3);
    gear4 = parseFloat(gear4);
    gear5 = parseFloat(gear5);
    ratio = gear2 / gear1;
    return ratio;
}

And now we can extend this implementation to cater for extra gears.

If there is a third gear we will want to take a new ratio:

function calculateRatio(gear1, gear2, gear3, gear4, gear5) {
    var ratio;
    gear1 = parseFloat(gear1);
    gear2 = parseFloat(gear2);
    gear3 = parseFloat(gear3);
    gear4 = parseFloat(gear4);
    gear5 = parseFloat(gear5);
    ratio = gear2 / gear1;
    if (gear3) {
        ratio = gear3 / ratio;
    }
    return ratio;
}

If gear three is empty, the only ratio returned is for the gears above it.

If gear 4 is supplied, we will want the gear 3 ratio to be updated:

function calculateRatio(gear1, gear2, gear3, gear4, gear5) {
    var ratio;
    gear1 = parseFloat(gear1);
    gear2 = parseFloat(gear2);
    gear3 = parseFloat(gear3);
    gear4 = parseFloat(gear4);
    gear5 = parseFloat(gear5);
    ratio = gear2 / gear1;
    if (gear3) {
        ratio = gear3 / ratio;
        if (gear4) {
            ratio = gear4 / ratio;
        }
    }
    return ratio;
}

And as for gear 5, we can do the same?

function calculateRatio(gear1, gear2, gear3, gear4, gear5) {
    var ratio;
    gear1 = parseFloat(gear1);
    gear2 = parseFloat(gear2);
    gear3 = parseFloat(gear3);
    gear4 = parseFloat(gear4);
    gear5 = parseFloat(gear5);
    ratio = gear2 / gear1;
    if (gear3) {
        ratio = gear3 / ratio;
        if (gear4) {
            ratio = gear4 / ratio;
            if (gear5) {
                ratio = gear5 / ratio;
            }
        }
    }
    return ratio;
}

Yes, there are better recursive ways of doing the above, but first we must figure out if we correctly understand what you want to achieve is correct.

In a linear gear train (as opposed to compound gears) only the first and last matter to the equation. Those inbetween are “idlers”.

1 Like

That’s an easy fix then, just replace gear3 / ratio instead with gear3 / gear1, and likewise with gears 4 and 5.

Thanks soooooo much for your help. You guys are great. I put together the code you wrote but it doesn’t work. When you put in the values nothing happens. The gear ratio like SamA74 said the idler or middle gears don’t matter only the first and last. I think I made the “math part” work this way.

<form id="gearRatio" action="">
  <fieldset>
    <legend>Gear Ratio Calculator</legend>
    <p>
      <label for="gear1">First Gear</label>
      <input id="gear1" name="gear1" type="number" />
    </p><br><br>
    <p>
      <label for="gear2">Second Gear</label>
      <input id="gear2" name="gear2" type="number" />
    </p><br>
    <p>
      <label for="gear3">Third Gear</label>
      <input id="gear3" name="gear3" type="number" />
    </p><br>
    <p>
      <label for="gear4">Fourth Gear</label>
      <input id="gear4" name="gear4" type="number" />
    </p><br>
    <p>
      <label for="gear5">Fifth Gear</label>
      <input id="gear5" name="gear5" type="number" />
    </p><br>
    <p>
      <input type="submit" value="Calculate Ratio" /> or
      <input type="reset" value="Reset" />
    </p><br><br><br>
    <p>
      <label for="ratio">Ratio</label>
      <input id="ratio" name="ratio" />
    </p>
  </fieldset>
</form>
<script>

function calculateRatio(gear1, gear2, gear3, gear4, gear5) {
    gear1 = parseFloat(gear1);
    gear2 = parseFloat(gear2);
    gear3 = parseFloat(gear3);
    gear4 = parseFloat(gear4);
    gear5 = parseFloat(gear5);
    return (gear2 / gear1);
}

form.onsubmit = function() {
    this.ratio.value = calculateRatio(this.gear1.value, this.gear2.value, this.gear3.value, this.gear4.value, this.gear5.value);
    return false;
};
function calculateRatio(gear1, gear2, gear3, gear4, gear5) {
    var ratio;
    gear1 = parseFloat(gear1);
    gear2 = parseFloat(gear2);
    gear3 = parseFloat(gear3);
    gear4 = parseFloat(gear4);
    gear5 = parseFloat(gear5);
	if (gear2){
    ratio = gear2 / gear1;
    if (gear3) {
        ratio = gear3 / gear1;
        if (gear4) {
            ratio = gear4 / gear1;
            if (gear5) {
                ratio = gear5 / gear1;
            }
        }
    }
	}
    return ratio;
}
</script>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.