Divide Fractions in JavaScript | Junior Secondary Math Tutorial

Understanding the Math Behind Fraction Division | Maths Explanation for JavaScript Kids

JavaScript makes it easy to perform arithmetic operations like dividing fractions. Whether you're simplifying fractions, multiplying them, or coding a math class project, JavaScript provides clear syntax and powerful tools for beginners and students alike.

Dividing fractions in JavaScript is a great way to combine coding with math skills. In this tutorial, junior secondary students will learn how to use JavaScript to divide fractions step-by-step. We'll explore how to invert and multiply fractions, write a JavaScript class for fraction operations, and understand the logic behind the algorithm.

Division is the inverse operation of multiplication; That is exactly what we'll do with for fractions.
Invert the fractions that come after a division sign, as well as change the division sign to multiplication, and then follow through with multiplication, as already explained in the Multiplying Fractions with JavaScript tutorial.

Algorithm Steps to Divide Fractions in JavaScript

Say we are to implement a JavaScript algorithm to divide the given fractional expression
²¹/₈ ÷ ⁷/₂;

Inverting this will yield
²¹/₈ ÷ ⁷/₂;

Then we can go ahead and multiply.

Create 2 new files; On Notepad++: File, New.
Call them DivideFraction.html and DivideFraction.js;
Type out the adjoining JavaScript code for dividing fractions.

Note: The bulk of the divide_fraction.js code is a copy of that for multiplying fractions.

So! JavaScript Fun Practice Exercise - Divide Fractions

As a fun practice exercise, feel free to try out your own fractions with different numerators and denominators, and see how the JavaScript code divides those fractions.

JavaScript Code for DivideFraction.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Dividing Fractions</title>
        <script src="MultiplyFraction.js"></script>
        <script src="DivideFraction.js"></script>
    </head>
    <body>

        <h3>Divide Fractions</h3>
        
        <div id="divide_fraction"></div>

        <script>
            var result = "Solving:<br/>";
            // Print as fraction
            for (var i = 0; i < numerators.length-1; i++) {
                result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub>";
            result += "    ÷     ";
            }
            result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub><br/><br/>";

            // Carry out division
            maxMember();
            doDivide();

            // Print as fraction
            result += "Answer     =      ";
            result += " <sup>" + answer[0] + "</sup> ";
            result += "/ <sub>" + answer[1] + "</sub><br/>";

            document.getElementById("divide_fraction").innerHTML = result;
        </script>

    </body>
</html>

JavaScript Code for DivideFraction.js

numerators = [16, 9, 640, 7];
denominators = [9, 20, 27, 20];

function doDivide() {
    var temp;
    // Invert every other fraction but the first
    for (var i = 1; i < numerators.length; i++) {
        temp = numerators[i];
        numerators[i] = denominators[i];
        denominators[i] = temp;
    }
    doMultiply();
}

I have a better version / See other versions.