Checking If value exist twice in array javascript

Question

So basically I want to create a Memory Card game that requires some pairs of hidden images. I've written a function but It returns NaN plus I do not really know how to check if some src in array exists twice already.

  function createCards(ammount) {
    const gameCards = document.createElement("div") * ammount;
    for (let i = 0; gameCards.length - 1; i++) {
      gameCards[i].className = "card.card--click";
      const gameCardFront = document.createElement("div");
      const gameCardBack = document.createElement("div"); 
      gameCards[i].appendChild(gameCardFront);
      gameCards[i].appendChild(gameCardBack);
      gameCardFront.className = "card__front";
      gameCardBack.className = "card__back";
      function randImg() {
        const img = new Image();
        const imgArray = ["ball", "car", "fork", "spoon", "sun"];
        const gameArray = [];
        for (let i = 0; i < ammount * 2 + 1; i++) {
          const randomSrc = Math.floor(Math.random() * (imgArray.length));
          img.src = "img/" + imgArray[randomSrc] + ".png";
          img.alt = imgArray[randomSrc];
          gameArray.push(img);
        }
        return gameArray;
      }
      randImg();
      gameCardBack.appendChild(img);
    }
    return gameCards;
  };
  createCards(8);

Manish Waran · Accepted Answer · 2017-04-16 15:16:49Z

1

function createCards(ammount) {
    const gameCards = []
    for (let i = 0; i < ammount; i++) {
        const gameCard = document.createElement("div");
        gameCard.className = "card.card--click";
        const gameCardFront = document.createElement("div");
        const gameCardBack = document.createElement("div"); 
        gameCard.appendChild(gameCardFront);
        gameCard.appendChild(gameCardBack);
        gameCardFront.className = "card__front";
        gameCardBack.className = "card__back";
        function randImg() {
            const uniqueSrc = {};
            const imgArray = ["ball", "car", "fork", "spoon", "sun"];
            const images = document.createElement("div");
            for (let i = 0; i < ammount * 2 + 1; i++) {
                const randomSrc = Math.floor(Math.random() * (imgArray.length));
                const img = new Image();
                if (!uniqueSrc[randomSrc]) {
                    uniqueSrc[randomSrc] = randomSrc;
                    img.src = "img/" + imgArray[randomSrc] + ".png";
                    img.alt = imgArray[randomSrc];
                    images.appendChild(img);
                } else {
                    i--;
                }
            }
            return images;
        }
        const images = randImg();
        gameCardBack.appendChild(images);
        gameCards.push(gameCard)
    }
    return gameCards;
};

Seems your code has some bugs. Have fixed it and will work fine now.

edited Apr 16, 2017 at 15:16

answered Apr 16, 2017 at 14:48

Manish Waran

9211 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Miqez Over a year ago

Yes, It works but It should be className not class I guess. Second thing is function returns only images with src "ball.png"

Manish Waran Over a year ago

You can change it to className. Second thing is you have given only 5 image names but expecting (amount * 2) which will be around 16 for 8. So it breaks their. So if you specify adequate number of names you will get it perfectly.

Miqez Over a year ago

Yes I know, first of all I want to build a mechanism of this game, then I will add more images but even if I call a function createCards(5) I receive 5 images with src = "ball.png". Why is that?

Manish Waran Over a year ago

uniqueSrc[randomSrc] = randomSrc - the randomSrc is index. So for '0' the condition for checking unique will fail. That is why you get ball.png again and agian. You can simply change uniqueSrc[randomSrc] = true. This will help you. But using random will make your code slow.

Miqez Over a year ago

That's interesting. Should I create another function that will shuffle exisiting cards then? What's the best solution for this problem?

|

Collectives™ on Stack Overflow

Checking If value exist twice in array javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related