Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

plue's avatar
Level 1

generate 5 random name

Hello, i have a question and im not good with javascript, i gather ideas to code in internet and come up with this code and output

<script type="text/javascript">
    window.onload = function() {
    let i = 0;
    let x = 0;
    var namesDiv = document.getElementById("names");
    var datas = {!! $data !!};
    console.log(datas)
    var namesList = datas;
    
    var pickerDiv = document.getElementById("startButton");    
    var winnerDiv = document.getElementById("winner");    
    var setWinner = document.getElementById("setWinner");    
    let intervalHandle = null;    
    var headerOne = document.getElementById("headerNames");
    
    
    if (!Array.isArray(namesList) || !namesList.length) {
        
        pickerDiv.style.display = "none";
        
    } else {
        
        pickerDiv.style.display = "block";
        winnerDiv.style.display = "none";
        
    }     

    document.getElementById("startButton").addEventListener("click", function () {

        confetti.remove();
        
       
        
        picker.style.display = "block";
    
    });

    document.getElementById("startButton").addEventListener("click", function () {

        this.style.display = "none";

        shuffle(namesList);

        confetti.remove();      

        intervalHandle = setInterval(function () {
            headerOne.value = namesList[i++ % namesList.length];
        }, 50);

        setTimeout(function(){ 
            clearInterval(intervalHandle); 
            startButton.style.display = "none";
            winnerDiv.style.display = "block";
            confetti.start();
        }, 3000);
        
    });


    function shuffle(array) {

      var currentIndex = array.length, temporaryValue, randomIndex;
      
      while (currentIndex) {

        randomIndex     = Math.floor(Math.random() * currentIndex);
        currentIndex   -= 1;
        temporaryValue      = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex]  = temporaryValue;
      }

      return array;
  
    }   

}
</script>

i can generate 1 random name in my page in that code, but i don't know which variable in the code is the final result, i tried put them in console.log and didn't find it because the result in the page and console is different. Im asking this question because i want to edit the code to generate 5 random names. Anyone can help me? (hope i explain it well).

0 likes
4 replies
piljac1's avatar

It's hard to 100% confirm without the actual UI, but from what I understand, this code causes names to change quickly before stopping on one name and showing a winning UI with confettis.

intervalHandle = setInterval(function () {
    headerOne.value = namesList[i++ % namesList.length];
}, 50);

setTimeout(function(){ 
    clearInterval(intervalHandle); 
    startButton.style.display = "none";
    winnerDiv.style.display = "block";
    confetti.start();
}, 3000);

What did you try to log in the console ? Because from my understanding, if you log headerOne.value under confetti.start();, you would get the actual displayed value.

plue's avatar
Level 1

@piljac1 thanks i get the actual data! last time i console it under the headerOne that's why the result is different. Can you give me an idea how can i get 5 random names?

piljac1's avatar
piljac1
Best Answer
Level 28

@plue It depends how you intend to display them (HTML-wise). But in the simplest form, you could modify the setInterval portion for:

intervalHandle = setInterval(function () {
    const winnerNames = [];

    for (let j = 0; j < 5; j++) {
        winnerNames.push(namesList[i++ % namesList.length]);
    }

    headerOne.value = winnerNames.join(', ');
}, 50);
1 like
plue's avatar
Level 1

@piljac1 i already solved it, but this is much shorter than i did thanks for this!

Please or to participate in this conversation.