1

I'm writing a bit of script for the WooCommerce product page that takes the quantity entered in the qty input field and displays some text based on that qty:

function reduce(numerator,denominator){
      var gcd = function gcd(a,b){
        return b ? gcd(b, a%b) : a;
      };
      gcd = gcd(numerator,denominator);
      return [numerator/gcd,denominator/gcd];
    }
    jQuery('.qty').on('change', function() {
       showOdds();
    });
    
    function showOdds() {
    var qty = 1; // hard coded for testing
    var min = 200; // hard coded for testing    
    var sofar = 40; // hard coded for testing
    var plural = '';
    var total = 0;
    var odds = '';
    if (qty > 1){
        plural = 'tickets';
    }
      else{
        plural = 'ticket';
       }
    if (qty > 0){
        if ((qty + sofar) > min){
            total = qty + sofar;
            odds = reduce(qty, total);
        }
        else {
            odds = reduce(qty, min);
        }   
        var text = document.createElement('p');
        text.className = 'product-odds';
        text.innerHTML = 'Max odds of ' + qty + ' ' + plural + ' winning is ' + odds + '.';
        var theDiv = document.getElementById('odds');
        theDiv.appendChild(text);
        }
    }
    jQuery(document).ready(function loadPage() {
      showOdds();
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='odds'></div>

The current output:

Max odds of 1 ticket winning is 1,200

How can I make the odds display in their simplest fraction form? For example if there are 200 tickets available and '1' is entered, it should show '1/200' but if someone enters '20' it should show '1/10'. The 'total' figure will eventually be picked up from the page rather than a fixed value too.

I can use the gcd as posted here but how can I get the two numbers from the array and display them as a fraction (with the /) in the required div?

Lyall
  • 1,367
  • 3
  • 17
  • 42
  • 1
    jQuery is a DOM manipulation library, it won't help you with maths. [Is there a JavaScript function that reduces a fraction](https://stackoverflow.com/questions/4652468/is-there-a-javascript-function-that-reduces-a-fraction) – Guy Incognito Dec 29 '20 at 10:28
  • @GuyIncognito Ah ok, thanks – Lyall Dec 29 '20 at 10:43
  • @GuyIncognito I second that, jQuery is just like regexp - you can basically do everything with it, even fixing a leak in the outer hull of the ISS.. ;) – iLuvLogix Dec 29 '20 at 12:31

1 Answers1

2

You can return the desired string instead of array. Check the snippet below. I've changed return [numerator/gcd,denominator/gcd]; to return numerator/gcd+'/'+denominator/gcd; 

function reduce(numerator,denominator){
      var gcd = function gcd(a,b){
        return b ? gcd(b, a%b) : a;
      };
      gcd = gcd(numerator,denominator);
      return numerator/gcd+'/'+denominator/gcd;
    }
    jQuery('.qty').on('change', function() {
       showOdds();
    });
    
    function showOdds() {
    var qty = 1; // hard coded for testing
    var min = 200; // hard coded for testing    
    var sofar = 40; // hard coded for testing
    var plural = '';
    var total = 0;
    var odds = '';
    if (qty > 1){
        plural = 'tickets';
    }
      else{
        plural = 'ticket';
       }
    if (qty > 0){
        if ((qty + sofar) > min){
            total = qty + sofar;
            odds = reduce(qty, total);
        }
        else {
            odds = reduce(qty, min);
        }   
        var text = document.createElement('p');
        text.className = 'product-odds';
        text.innerHTML = 'Max odds of ' + qty + ' ' + plural + ' winning is ' + odds + '.';
        var theDiv = document.getElementById('odds');
        theDiv.appendChild(text);
        }
    }
    jQuery(document).ready(function loadPage() {
      showOdds();
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='odds'></div>
Nik
  • 1,589
  • 2
  • 15
  • 23