# Can't show and then hide cards in matching game

**URL:** <https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972>\
**Category:** programming\
**Created:** [November 18, 2018, 3:21pm UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972 "2018-11-18T15:21:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [November 18, 2018, 3:21pm UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/1 "2018-11-18T15:21:50Z")

</div>

I’m trying to allow the user to briefly show all the randomized cards for x seconds before the play timer begins. Failing.

https://codepen.io/squinter/embed/preview/bQoeaz?height=300&slug-hash=bQoeaz&default-tabs=js,result&host=https://codepen.io

I’ve had minor success with this (commented out in the Pen):

```
document.querySelector('.showCards').addEventListener('click', showAllCards);
function showAllCards() {
  let pix = document.querySelectorAll('img');
    pix[0].style.display = 'inline';
    // setTimeout(hide, showAllHide);
};

```

But, the one card I flip seems to also be selected within the game.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 19, 2018, 3:42am UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/3 "2018-11-19T03:42:00Z")

</div>

To show all cards, you need to loop through all images as opposed to just the first one. Try this code:

```
function showAllCards() {
  let pix = document.querySelectorAll('img');
  
  for (var i = 0; i < pix.length; i++) {
    pix[i].style.display = 'inline';
  }
    //pix[0].style.display = 'inline';
  //setTimeout(hide, showAllHide);
};

```

With this code, clicking on **Show Cards** ends up showing all of the cards 🙂

---

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [November 19, 2018, 3:02pm UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/4 "2018-11-19T15:02:50Z")

</div>

Thanks. Just after posting my question I solved it without using a loop (a very long way around indeed!). For some reason, although I get what a loop is, I cannot seem to comprehend it in practice. I think that comparing my solution (sans loop) and yours (loop) will help me a great deal!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 19, 2018, 9:23pm UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/5 "2018-11-19T21:23:36Z")

</div>

What was your non-loop solution? Did you set a `class` value on the parent container element that maps to a style rule that adjusts the `display` property?

---

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [November 20, 2018, 11:41am UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/6 "2018-11-20T11:41:36Z")

</div>

It’s been a couple days but I think I set each image in the array to display.  
pix[0].style.display = ‘inline’;  
pix[1].style.display = ‘inline’;  
pix[2].style.display = ‘inline’;  
// etc.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 20, 2018, 2:50pm UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/7 "2018-11-20T14:50:33Z")

</div>

Glad that worked, but that is a lot of code to copy/paste. A loop may be a better option in such a case 😛

---

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [November 20, 2018, 8:45pm UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/8 "2018-11-20T20:45:35Z")

</div>

Agreed. In fact, your answer (compared to my earlier solution) really helped me comprehend how a loop actually gets used. Thanks.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 22, 2018, 2:04am UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/9 "2018-11-22T02:04:55Z")

</div>

Totally forgot about this. In case you are curious to a [similar game](https://www.kirupa.com/react/koncentration/index.html) I created in React a while ago, check this out: [https://github.com/kirupa/kirupa/tree/master/reactjs/koncentration](https://github.com/kirupa/kirupa/tree/master/reactjs/koncentration) 🙂

---

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [November 22, 2018, 3:00am UTC](https://forum.kirupa.com/t/cant-show-and-then-hide-cards-in-matching-game/638972/10 "2018-11-22T03:00:43Z")

</div>

Thanks!  
Now I just have to learn React!  
😫