0

I'm a beginner at JS and I am trying to create a random chooser that gives me a word from a list of words for an English lesson. I created a new class that has all of the formatting information (name, image, background color, border color) for when you click on the button to produce a random word. I want to access a specific instance (which is hard coded for the time being but I hope will be user input as I learn more), and then apply each property to the corresponding CSS code to change the image on the screen, and after each click it should register if a word has been chosen already and stop picking it after it has been chosen two times. In essence, I'm not really sure how to approach this issue to begin with. Can I iterate over class instances once I've created them?

I am able to get it to work with an array of objects that I can iterate over and draw from, but I am not able to stop it once it has hit so many times. I've tried pushing values to a new array and then comparing two arrays, but that didn't seem to work. I was imagining that I could just increment a hitCount property in a class and stop it from choosing one that is already at 2.

class Vocab {
    constructer(name, image, bgcolor, bordercolor) {
        this._name = name;
        this._image = image;
        this._bgcolor = bgcolor;
        this._bordercolor = bordercolor;
        this._hitCount = 0;
    }

    get name() {
        return this._name;
    }

    get image() {
        return this._image;
    }

    get bgcolor() {
        return this._bgcolor;
    }

    get bordercolor() {
        return this._bordercolor;
    }

    incrementHitCount() {
        this._hitCount++;
    }
}

const running = new Vocab('running', '<img class="verb-pics" src="./images/running.png">', '#fc4e4e', '#9c3333');

I've also tried Vocab as an array of objects and I can get the properties but still not sure how to stop each instance after it's been chosen. With this I can't seem to even access each property when using something like "running.name".

EDIT: The best answer was in comments and I though I should put it here to make it more clear...

doubling up each element in one array, shuffling the array, and then using .pop() was the best answer.

kcupps
  • 11
  • 2
  • Could you show an example of what you have so far so it's better for me to understand what you're trying to do? – goto Jul 25 '19 at 11:22
  • BTW, shouldn't it be `constructor`? – Krishna Prashatt Jul 25 '19 at 11:24
  • 1
    create an array of instances, and put each instance twice in that array. Then perform a random shuffle of that array (see [how to shuffle an array](https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array) ), and finally, `pop` instances from that array, which will be random. – trincot Jul 25 '19 at 11:30
  • Krishna yes it should have been, but that wasn't the only problem as I've redone this a few times trying to see if I could get it to work. Trincot, thank you, that is the answer I was looking for or at least an effective one that works. – kcupps Jul 25 '19 at 13:05

1 Answers1

0

What you can do is:

  1. Store all the vocabulary in an array
const vocabs = [ new Vocab(...), new Vocab(...), new Vocab(...)];
  1. Filter all vocabs to select only the ones where _hitCount is smaller than 2
const availableVocabs = vocabs.filter((vocab) => vocab._hitCount < 2);
  1. Select random index and return a vocab with that index
const randomIndex = Math.floor((Math.random() * availableVocabs.length));
const selectedVocab  = availableVocabs[randomIndex];
Gregory Witek
  • 1,216
  • 8
  • 10