How to display non-repetitive letter within 3 boxes?-CodePudding

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(); 
        }

CodePudding user response：

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! */
}

CodePudding user response：

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