Variables occasionally don't generate: max call stack size issue

Question

Error detailed towards bottom of post, but before getting to that, I'll give some background info. I have the following script, which generates:

1) TWO DIFFERENT NUMBERS BETWEEN 2 & 20

 var GenerateRandomNumber1to20No1 = GenerateRandomNumber1to20No1(); 
$('.GenerateRandomNumber1to20No1').html(GenerateRandomNumber1to20No1);

 function GenerateRandomNumber1to20No2() {
    var min = 2, max = 20;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;   
  return (random !== GenerateRandomNumber1to20No1) ? random: GenerateRandomNumber1to20No2();

}

 var GenerateRandomNumber1to20No2 = GenerateRandomNumber1to20No2(); 
$('.GenerateRandomNumber1to20No2').html(GenerateRandomNumber1to20No2);

 function GenerateRandomNumber1to20No3() {
    var min = 2, max = 20;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;   
   return (random !== GenerateRandomNumber1to20No1 && random!==GenerateRandomNumber1to20No2) ? random: GenerateRandomNumber1to20No3();

}

2) TWO DIFFERENT NUMBERS LESS THAN THE PREVIOUS 2 NUMBERS

function GenerateRandomNumber1to20lessthanNo1() {
    var min = 2, max = GenerateRandomNumber1to20No1-1;
    var random = Math.floor(Math.random() * (max - min + 1)) + 1;   
    return random;

}

 var GenerateRandomNumber1to20lessthanNo1= GenerateRandomNumber1to20lessthanNo1(); 
$('.GenerateRandomNumber1to20lessthanNo1').html(GenerateRandomNumber1to20lessthanNo1);

function GenerateRandomNumber1to20lessthanNo2() {
    var min = 2, max = (GenerateRandomNumber1to20No2 - 1);
    var random = Math.floor(Math.random() * (max - min + 1)) + min;   
  return (random !== GenerateRandomNumber1to20lessthanNo1) ? random: GenerateRandomNumber1to20lessthanNo2();

}

 var GenerateRandomNumber1to20lessthanNo2 = GenerateRandomNumber1to20lessthanNo2(); 
$('.GenerateRandomNumber1to20lessthanNo2').html(GenerateRandomNumber1to20lessthanNo2);

3) 2 DIFFERENT PRIME NUMBERS

    function PrimeNumber1() {
  var PrimeNumber1= ['3', '5', '7', '11'];
    var PrimeNumber1random= PrimeNumber1[Math.floor(Math.random() * PrimeNumber1.length)];
    return PrimeNumber1random;

}

var PrimeNumber1replacer= PrimeNumber1();
 $('.PrimeNumber1replacer').html(PrimeNumber1replacer);

    function PrimeNumber2() {
  var PrimeNumber2= ['3', '5', '7', '11'];
    var PrimeNumber2random= PrimeNumber2[Math.floor(Math.random() * PrimeNumber2.length)];
    return (PrimeNumber2random !== PrimeNumber1replacer) ? PrimeNumber2random: PrimeNumber2();

}

var PrimeNumber2replacer= PrimeNumber2();
 $('.PrimeNumber2replacer').html(PrimeNumber2replacer);

I USE THESE VARIABLES TO REPLACE ELEMENTS WITH CORRESPONDING CLASSES WITH THE VALUES OF THE RESPECTIVE VARIABLES

<span class = "GenerateRandomNumber1to20nNo2"></span>
<span class = "GenerateRandomNumber1to20nNo2"></span>
<span class = "GenerateRandomNumber1to20lessthanNo1"></span>
<span class = "GenerateRandomNumber1to20lessthanNo2"></span>
<span class = "PrimeNumber1replacer"></span>
<span class = "PrimeNumber2replacer"></span>

Sometimes, the code works fine: the variables generate and the elements are replaced with those variables. Other times, the variables don't populate and I get one of the two following errors:

Uncaught RangeError: Maximum call stack size exceeded
    at GenerateRandomNumber1to20lessthanNo2 *[or No1]*

OR

Uncaught TypeError: PrimeNumber2 *[or 1]* is not a function
    at PrimeNumber2

I tried to do some research on Stackoverflow and it seems it might be an issue with recursion, but I have no idea how to fix this issue. If anyone has any advice, I would appreciate it.

Thank you!

Answer 1

You get a stack overflow because almost none of the JS engines are ES6 compliant yet so even though you use tail recursion you blow the stack. The best thing right now is to rewrite it into a loop that does the same until you have succeded.

function generateRandomNumber(predicate = v => true) {
    const min = 2;
    const max = 20;
    let random;
    do {
        random = Math.floor(Math.random() * (max - min + 1)) + 1;
    } while (!predicate(random));
    return random;
}

// two different numbers
const first1 = generateRandomNumber();
const second1 = generateRandomNumber(v => v !== first1);

// two different number less than previous
const first2 = generateRandomNumber();
const second2 = generateRandomNumber(v => v < first2); // possible infinite loop

// two different prime numbers
function isPrime(n) {
  if (n % 2 === 0) return n == 2
  const limit = Math.sqrt(n);
  for (let i = 3; i <= limit; i += 2) {
    if (n % i === 0)
      return false;
  }
  return true;
}

const first3 = generateRandomNumber(isPrime);
const second3 = generateRandomNumber(v => isPrime(v) && v !== first3);

I've left out the code that puts the values onto the DOM since it's not very interesting. I don't name the variables after the function since they share the same namespace and thus after setting the name GenerateRandomNumber1to20No1 the function has been replaced with the value.

Note that i mention the "two different number less than previous" that you might get an infinite loop. There is a 5,5% chance that the first random number is 2. There is no number generated by that same function which is smaller than 2 and thus it will not terminate.