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.

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.