JavasScript Show first two images, and then 1 random images from an array using a class method-CodePudding

I have all of the components for this project with the exception of a class method to show the first two images in the array (the Pokeball, and the default eevee) then randomly choose from an array one more image(eevee evolutions) and then stop.

Please be patient I am very new to this.

class Pokemon {
    constructor() {
        this.listOfCharmander = [
            "./images/pokeball.png",
            "./images/charmander/charmander0.png",
            "./images/charmander/charmander1.png",
            "./images/charmander/charmander2.png",
        ];
        this.index = 0;
        this.pokemon = document.createElement("img");
    }
    handleClick = () => {
        if (this.index < 3) {
              this.index;
            this.pokemon.src = this.listOfCharmander[this.index];
        }
    };
    buildPokemon = () => {
        this.pokemon.src = this.listOfCharmander[0];
        this.pokemon.classList.add("pokemon");
        this.pokemon.addEventListener("click", this.handleClick);
        main.appendChild(this.pokemon);
    };
}
const pokemon = new Pokemon();
const pokemon1 = new Pokemon();
pokemon.buildPokemon();
pokemon1.buildPokemon();

class Eevee {
    constructor() {
        this.eeveeEvolutions = [
            "/images/pokeball.png",
            "images/eevee/eevee0.png",
            "images/eevee/eevee1.png",
            "images/eevee/eevee2.png",
            "images/eevee/eevee3.png",
            "images/eevee/eevee4.png",
            "images/eevee/eevee5.png",
            "images/eevee/eevee6.png",
            "images/eevee/eevee7.png",
            "images/eevee/eevee8.png",
        ];
        this.index = 0;
        this.eevee = document.createElement("img");
    }
    handleClick = () => {
        if (this.index < 9) {
              this.index;
            this.eevee.src = this.eeveeEvolutions[this.index];
        }
    };
    buildEevee = () => {
        this.eevee.src = this.eeveeEvolutions[0];
        this.eevee.classList.add("eevee");
        this.eevee.addEventListener("click", this.handleClick);
        main.appendChild(this.eevee);
    };
}
const eevee = new Eevee();
const eevee1 = new Eevee();
eevee.buildEevee();
eevee1.buildEevee();

...

I apologize if my question isnt exactly clear. I need to add to my handClick method. A way display the first image (the Pokeball) and then the 2nd image (default eevee) And then randomly choose (including having it stay the same there could be no evolution at all) one more evolution from the remaining array.

CodePudding user response：

if you always need first two images in your array then you can add extra attribute to your Eevee class to store those images path, and for random image you can add this code to your handleClick()

handleClick = () => {
        this.index=Math.floor(Math.random(2,9)*10)
        this.eevee.src = this.eeveeEvolutions[this.index];
};