JS: How to create a random picker that won't pick the same item twice?

Question

I'm making a random hero picker for a game, and this tool will randomly pick heroes for the player. I want to add a feature where it picks the heroes for the whole team of 3, but I don't know how to make it so that the same hero won't be pick more than once. Here is a sample of my code for picking a random hero for a player. Thank you in advance!!!!

<script language="JavaScript">

function pickhero(){
var imagenumber = 16 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array
images[1] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/ringo.png"
images[2] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/krul.png"
images[3] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/ardan.png"
images[4] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/saw.png"
images[5] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/petal.png"
images[6] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/adagio.png"
images[7] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/catherine.png"
images[8] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/koshka.png"
images[9] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/skaarf.png"
images[10] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/joule.png"
images[11] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/glaive.png"
images[12] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/taka.png"
images[13] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/celeste.png"
images[14] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/vox.png"
images[15] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/fortress.png"
images[16] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/rona.png"
var image = images[rand1]
document.team1hero1.src = image
}
</script>

Answer 1

First of all, I would have an array of all the heroes outside of the pickhero() scope. Then, I would have a second array that would point back to the original array and lose elements as heroes are chosen.

Here's a simple example.

var heroes = ["link1", "link2", "link3", "link4"];
var heroesAvailable = [];
for (var i=0; i<heroes.length; i++) {
    heroesAvailable.push(i);  // [0, 1, 2, 3]
}

var heroesChosen = [];
for (var i=0; i<3; i++) {  // choose 3 heroes
    // the amount of heroes not chosen yet
    var imageNumber = heroesAvailable.length;
    var randHero = Math.floor(Math.random()*imageNumber);

    heroesChosen.push(heroes[heroesAvailable[randHero]]);

    // remove that hero from the available array
    heroesAvailable.splice(randHero, 1);
}

Answer 2

Remove the picked image from images array.

Then do random pick on the images array.

Hope ths help!

Answer 3

maybe it is better to return the string, instead of using a hard coded target document.team1hero1.src.

function pickhero() {
    if (!pickhero.images) {
        pickhero.images = ['ringo', 'krul', 'ardan', 'saw', 'petal', 'adagio', 'catherine', 'koshka', 'skaarf', 'joule', 'glaive', 'taka', 'celeste', 'vox', 'fortress', 'rona'];
    }
    var i = Math.random() * pickhero.images.length | 0;
    return 'http://www.vaingloryfire.com/images/wikibase/icon/heroes/' + pickhero.images.splice(i, 1) + '.png';;
}
document.team1hero1.src = pickhero();