如何使javascript显示随机名称而不重复？

Question

I need to be able to click on a button, then have a few different names come out in a random order without any name being repeated. Displaying random names is simple enough, but I cannot avoid repeats. Here's what I have and I don't understand why it doesn't work.

<script>

var players = []
players[0] = "Billy";
players[1] = "Alex";
players[2] = "Kevin";
players[3] = "Fred";

function tournament(amount) {
    var a = 0, i = 0, place = 1;
    randomlyselect:
    while (a<amount) {
        var randomplayer = Math.floor(Math.random()*(players.length));
        if (players[randomplayer] === document.getElementById('player1').innerHTML || document.getElementById('player2').innerHTML || document.getElementById('player3').innerHTML) {
            continue randomlyselect;
            } 
        else {
            document.getElementById('player'+place).innerHTML = players[randomplayer];
            place++;
            a++;
        }
    }

}

</script>

<button onClick="tournament(4)">Tournament Results</button>

<p id="player1"></p>
<p id="player2"></p>
<p id="player3"></p>
<p id="player4"></p>

I know the problem is the if statement, but I don't know how else I would check if a name was already being displayed. If you know what's wrong with my method of checking if something was already picked or a better way of avoiding repeats please let me know.

Answer 1

 var players = [] players[0] = "Billy"; players[1] = "Alex"; players[2] = "Kevin"; players[3] = "Fred"; function tournament(amount) { var randomOrder = shuffle(players) var count = Math.min(amount, randomOrder.length) for (var i = 0; i < count; ++i) { document.getElementById("player" + (i + 1)).textContent = randomOrder[i] } } // http://stackoverflow.com/a/2450976/4339170 function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } 

 <button onClick="tournament(4)">Tournament Results</button> <p id="player1"></p> <p id="player2"></p> <p id="player3"></p> <p id="player4"></p> 

Answer 2

You can clone your original array and then just splice items from it one by one. This way you will guarantied get unique results each time.

 var players = ["Billy", "Alex", "Kevin", "Fred"]; function tournament(amount) { var clone = players.slice(), i, player; for (var i = 0; i < amount; i++) { player = clone.splice(Math.floor(Math.random() * clone.length), 1); document.getElementById('player' + (i + 1)).innerHTML = player; } } 

 <button onClick="tournament(4)">Tournament Results</button> <p id="player1"></p> <p id="player2"></p> <p id="player3"></p> <p id="player4"></p> 

But be aware that since it creates a copy of the array, this approach might be not ideal in case of really big players arrays.

Answer 3

Here's a generic functional method to create a new array with values of the original array in random order without duplicates:

 function randomizeArrayValues(arr) { return String(Array(arr.length)) .split(',') .map( function () { return this .splice(Math.floor((Math.random()*this.length)), 1) .pop(); }, arr.slice() ); } // example // ------- var players = ["Billy", "Alex", "Kevin", "Fred", "Mary", "Beth"]; var trial = 10; while (trial--) { document.querySelector('#result').textContent += randomizeArrayValues(players).join(', ') + '\\n'; } 

 <pre id="result"></pre> 

Answer 4

I'd slice each selection out of the array so it's not able to be picked again and then write it in the loop.

var randomplayer = Math.floor(Math.random()*(players.length));
players = players.slice(randomplayer, 1);

EDIT: let me write the entire function just in case there's confusion.

function tournament(){
    var place = 1;
    while(players.length > 0){
        var randomplayer = Math.floor(Math.random()*(players.length));
        document.getElementById('player'+place).innerHTML = players[randomplayer];
        players = players.slice(randomplayer, 1);
        place++;
    }
}