usingMaths.com
From Theory to Practice - Math You Can Use.







<< Previous Next >>

How to Divide Fractions in JavaScript | Step-by-Step Tutorial with Code Example



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
                  21/8 ÷ 7/2;

Inverting this will yield
                  21/8 ÷ 7/2;

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>
        <!-- This is where the result will be displayed when it is ready.-->
        <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 += "&nbsp;&nbsp;&nbsp;&nbsp;÷&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
            result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub><br/><br/>";
            
            // Carry out division
            maxMember();
            doDivide();

            // Print as fraction
            result += "Answer &nbsp;&nbsp;  =  &nbsp;&nbsp;  ";
            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();
}




<< Previous Next >>