Generate three random names from an array and assign them to an element

Question

Generate three random names from an array and assign them to an element

This website is amazing! I've interacted with so many awesome people here!

Currently, I have successfully implemented code to get one random name from an array. However, I now want to display three different names each time, and I'm facing a roadblock.

Is there anyone out there who can help me out and showcase their expertise? I would greatly appreciate it! <3

The JavaScript Code

     <script> 

window.onload = funkytown;

function funkytown() {
    document.getElementById("btn").onclick = name;
}

function name() {

        var students = ["Mike","Nick","Slagathor","Banana","Rick","Astley","Rock","JW","pronax"];
        var randomize = students.splice(Math.floor(Math.random() * students.length), 1);

        var html = "Random names: ";

        document.getElementById("text").innerHTML = html + randomize;


     }
     </script>

The HTML Structure

<span id="text"></span>
<input type="button" id="btn" value="Randomize!" />

javascript arrays random

Answer 1

Answer №1

If you have a function that can provide you with a random name from an array, you can utilize it recursively to gather three unique names.

 var randomNames=[]; 
 var count=0;

function name() {
    if(count==3){
      return;
    }
    var students = ["Hans","Ole","Nils","Olav","Per","Knut","Kari","Line","Pia"];
    var randomize = students.splice(Math.floor(Math.random() * students.length), 1);
    if(randomNames.indexOf(randomize) == -1){
        randomNames.push(randomize );
        ++count;
    }
    name();
  }

 var html = "Random names: ";

 document.getElementById("text").innerHTML = html + randomNames;

Answer 2

If you have a function that can provide you with a random name from an array, you can utilize it recursively to gather three unique names.

 var randomNames=[]; 
 var count=0;

function name() {
    if(count==3){
      return;
    }
    var students = ["Hans","Ole","Nils","Olav","Per","Knut","Kari","Line","Pia"];
    var randomize = students.splice(Math.floor(Math.random() * students.length), 1);
    if(randomNames.indexOf(randomize) == -1){
        randomNames.push(randomize );
        ++count;
    }
    name();
  }

 var html = "Random names: ";

 document.getElementById("text").innerHTML = html + randomNames;

Answer 3

Answer №2

function groovyVille() {
    document.getElementById("btn").onclick = displayNames;
}

function displayNames() {
    var randomizedNames = [],
        students = ["Hans", "Ole", "Nils", "Olav", "Per", "Knut", "Kari", "Line", "Pia"];

    for (var i = 0; i < 3; i++) {
        randomizedNames.push(students.splice(Math.floor(Math.random() * students.length), 1));
    }

    var outputText = "Tilfeldige navn: ";

    document.getElementById("text").innerHTML = outputText + randomizedNames.join(", ");
}

groovyVille();

Output: Tilfeldige navn: Line, Per, Ole

Check out this jsfiddle demo

Answer 4

function groovyVille() {
    document.getElementById("btn").onclick = displayNames;
}

function displayNames() {
    var randomizedNames = [],
        students = ["Hans", "Ole", "Nils", "Olav", "Per", "Knut", "Kari", "Line", "Pia"];

    for (var i = 0; i < 3; i++) {
        randomizedNames.push(students.splice(Math.floor(Math.random() * students.length), 1));
    }

    var outputText = "Tilfeldige navn: ";

    document.getElementById("text").innerHTML = outputText + randomizedNames.join(", ");
}

groovyVille();

Output: Tilfeldige navn: Line, Per, Ole

Check out this jsfiddle demo

Answer 5

Answer №3

There are numerous ways to tackle this problem

using a for loop

function generateNames() {
    var students = ["Hans","Ole","Nils","Olav","Per","Knut","Kari","Line","Pia"];
    var randomize = [];
    for(var i = 0; i < 3; i++) {
        randomize.push(students.splice(Math.floor(Math.random() * students.length), 1));
    }
    var output = "Random names: ";
    document.getElementById("text").innerHTML = output + randomize.join(' ');
}

a slightly unconventional method with array.map

function generateNames() {
    var students = ["Hans","Ole","Nils","Olav","Per","Knut","Kari","Line","Pia"];
    var randomize = [1,2,3].map(function() {
        return students.splice(Math.floor(Math.random() * students.length), 1);
    }).join(' ');
    var output = "Random names: ";
    document.getElementById("text").innerHTML = output + randomize;
}

eliminate random elements until only 3 are left

function generateNames() {
    var students = ["Hans","Ole","Nils","Olav","Per","Knut","Kari","Line","Pia"];
    while(students.length > 3) {
        students.splice(Math.floor(Math.random() * students.length), 1);
    }
    var output = "Random names: ";
    document.getElementById("text").innerHTML = output + students.join(' ');
}

Answer 6

There are numerous ways to tackle this problem

using a for loop

function generateNames() {
    var students = ["Hans","Ole","Nils","Olav","Per","Knut","Kari","Line","Pia"];
    var randomize = [];
    for(var i = 0; i < 3; i++) {
        randomize.push(students.splice(Math.floor(Math.random() * students.length), 1));
    }
    var output = "Random names: ";
    document.getElementById("text").innerHTML = output + randomize.join(' ');
}

a slightly unconventional method with array.map

function generateNames() {
    var students = ["Hans","Ole","Nils","Olav","Per","Knut","Kari","Line","Pia"];
    var randomize = [1,2,3].map(function() {
        return students.splice(Math.floor(Math.random() * students.length), 1);
    }).join(' ');
    var output = "Random names: ";
    document.getElementById("text").innerHTML = output + randomize;
}

eliminate random elements until only 3 are left

function generateNames() {
    var students = ["Hans","Ole","Nils","Olav","Per","Knut","Kari","Line","Pia"];
    while(students.length > 3) {
        students.splice(Math.floor(Math.random() * students.length), 1);
    }
    var output = "Random names: ";
    document.getElementById("text").innerHTML = output + students.join(' ');
}

Generate three random names from an array and assign them to an element

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve the value of the second child element in a table cell when clicking on it with Javascript

Mastering the art of implementing async/await properly within token validation scenarios

Implementing a click event on header elements within a full calendar component in a React application

instructions on invoking a function within the knockout $.getJSON() operation

AngularJS dropdown with multiple selections within a Bootstrap modal

"Upon clicking the login button, I encountered an issue with redirecting to the destination

What methods can I use to enable web browsers to remember form field data that is not transmitted in the usual manner?

Removing duplicate entries from a dropdown menu can be achieved by implementing

Encountering difficulty importing a class into the index.js file

Enhance a path SVG component with properties for a map in a React application

Detecting Android devices

Using jQuery UI datepicker - how to set a parameter based on a specific condition

The `getScript` function in jQuery is not working as expected, even though the path is accurate and the script was successfully downloaded

Enhancing Redux efficiency with substantial data structures

Difficulty encountered with fetching results using jQuery autocomplete with AJAX as the data source

`Where can I locate a grid example?`

Is there a way to display points on each vertex of my geometry using React, three.js, and Three-React-fiber?

Identifying Labels in ThreeJS

How can I show the remaining paragraph text upon clicking a button in a responsive manner using CSS and JavaScript?

Utilizing the Chinese Remainder Theorem within JavaScript Programming