How to display non-repetitive letter within 3 boxes?

Question

The below code can display a single random letter in each box. However, a letter should not be able to appear on different boxes at the same time as one of the boxes. For example, box 1 displays "A", then box 2 and 3 cannot display "A" also.

        function random() {
        var letter = [];
        for (var i = 65; i < 91; i++)
        {
            letter.push(String.fromCharCode(i));
        }
    
        return letter[Math.floor(Math.random() * letter.Length)];
      }
  
        function display()
        {
                document.getElementById("box1").textContent = random();
                document.getElementById("box2").textContent = random();
                document.getElementById("box3").textContent = random(); 
        }

Since you're just making an array and picking from it any of the 'get random elements from array without repeats' duplicates will work for you. [How to efficiently randomly select array item without repeats?](https://stackoverflow.com/questions/17891173/how-to-efficiently-randomly-select-array-item-without-repeats), [How to get a number of random elements from an array?](https://stackoverflow.com/questions/19269545/how-to-get-a-number-of-random-elements-from-an-array) etc. (but i wonder why you build the array every call instead of just generating a random number between 65 and 91) — pilchard, May 11 '22 at 22:41
also see: [Generate random string/characters in JavaScript](https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript) — pilchard, May 11 '22 at 22:45

cuuupid · Answer 1 · 2022-05-11T22:59:41.017

A good way to do this would be to overhaul your random function to generate all the letters at once, like so:

function randomN(n=3) {
  const letters = new Set()
  while (letters.size < 3) {
    const i = Math.floor(Math.random() * (91-65)) + 65
    letters.add(String.fromCharCode(i))
  }
  return [...letters]
}

function display() {
  const [letter1, letter2, letter3] = randomN()
  document.getElementById("box1").textContent = letter1
  document.getElementById("box2").textContent = letter2
  document.getElementById("box3").textContent = letter3
}

For a more modern approach you can utilize generators:

function* randomLetters() {
  const letters = "QWERTYUIOPASDFGHJKLZXCVBNM".split('')
  while (letters.length > 0) {
    const i = Math.floor(Math.random() * letters.length)
    yield letters[i]
    letters.splice(i, 1)
  }
}

function display() {
  const letters = randomLetters()
  document.getElementById("box1").textContent = letters.next()
  document.getElementById("box2").textContent = letters.next()
  document.getElementById("box3").textContent = letters.next()
  /* and so on and so forth! */
}

Yarin_007 · Answer 2 · 2022-05-11T23:02:52.197

function letterGenerator(n=1) {
    var generated_letters = [];
    var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); 
      
    for (var i=0; i<n; i++){     
       var random = Math.floor(Math.random() * alphabet.length);              
       var letter = alphabet.splice(random, 1)[0];
        generated_letters.push(letter)
    }
    return generated_letters;
}

var letters = letterGenerator(3)

gives Array(3) [ "Q", "T", "I" ], for example.

by using splice, we are making sure the randomly chosen letters are removed from the alphabet variable.

you can then go over the letters with for (letter of letters) or something like that, and add each one to the desired element.

by the way, maybe run a document.querySelectorAll('[id^="box"]'); to get all elements and add to them with a for loop.

this, alongside the n parameter, allows for any number of generated letters.

(if you really want it to be generic, create the box elements using js as well)

the solutions attached in the comments are certainly clever. I especially liked this one

How to display non-repetitive letter within 3 boxes?

2 Answers2