CODEWITHSUNDEEP
javascript
Sasha
Sasha

Reputation: 21

show images with click function

i am very new to javascript and not familiar with jquery. i am making the memory game with images on each card. in js i can make the cards visible at first then hidden with the showCard function but not in reverse. i can make each card hidden initially but they wont become visible if i change hidden=false or style.visibilty to visible still no pictures. My next obstacle will be to shuffle each of these cards at the start of each game. very grateful for any nudges in the right direction. thank you

let firstCard, secondCard;
let hasFlippedCard = false;



let cards = document.querySelectorAll('.backSide');
      //i tried => card.style.visibility = 'hidden':
      //i can put card.hidden = false and then make the
 //   statement true in my showCard func and works
  //  but not in 
       // reverse
cards.forEach(card => card.classList.add('flip'));
cards.forEach(card => card.addEventListener('click', showCard));






function showCard() {
 this.classList.remove('flip');
  //this.style.visibility= 'visible';

}
* {
                padding:0;
                margin:0;
                box-sizing: border-box;
            }
            
            body {
                height; 100vh;
                background: blue;
            }
            
            .memoryGame {
                width: 70vw;
                height: 70vh;
                border: 3px solid red;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: auto;
            }
            
            .card {
                background-image: url(pattern.jpg);
                position: relative;
                border: 2px solid blue;
                width: calc(25% - 10px);
                height:calc (25% - 10px);
                margin: 5px;
            }
            
            .frontSide {
                position: absolute;
                border: 5px solid deeppink;
                height: 100%;
                width: 100%;
            }
            
            .backSide {
                position: relative;
                height: 80%;
                width: 80%;
         
                margin: 10%;
            }
            .card:hover {
                border: 2px solid white;
            }
            .flip {
                visibility: hidden;
            }
<!DOCTYPE html>
<html>
    <head>
        <title>Memory Match Game</title>
    </head>
    <body>
       
       <h1 style='color: deeppink'>Memory Match Game</h1>
       <p>Time Elapsed: </p>
       <p id='timer'></p>

    <section class='memoryGame'>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
      
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='meerkat.jpg' alt='dog'>

    </div>
    <div class='card'>
        <img class='backSide' src='meerkat.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='tiger.jpg' alt='dog'>
      
    </div>
    <div class='card'>
        <img class='backSide' src='tiger.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='bird.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='bird.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='penguin.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide' src='penguin.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='pig.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='pig.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='owl.jpg' alt='dog'>

    </div>
    <div class='card'>
        <img class='backSide' src='owl.jpg' alt='dog'>
        
    </div>
    
    </section>
    </body>
</html>

Upvotes: 0

Views: 433

Answers (5)

James Mac
James Mac

Reputation: 494

To fix the first issue with visibility, you need to attach the event to the cards instead of images. Under let hasFlipped = false; replace the variables and the function: 

// Images are the ones that need to change visibility
let images = document.querySelectorAll('.backSide');

// Cards are the ones that need to be clicked
let cards = document.querySelectorAll('.card');

images.forEach(cardImage => cardImage.classList.add('flip'));
cards.forEach(card => card.addEventListener('click', showCard));

function showCard() {
    // This can be done with toggle of the class as per another answer
    this.classList.remove('flip');
    this.style.visibility = 'visible';
}

Second issue is a solution that you need to take a crack on. You can shuffle elements with a loop and randomized dynamic array or similar. You could generate the elements based on an array of images and another array of "selected images" to display using classes (from what I see you're trying to do). After you generate them, then attach the event as above. That would regenerate elements.

Or you could remove and append randomly using an array of positions or loop with random element to move (generate random integer within the number of images, using that number take an element and remove/append which will add it at the bottom). Using loop you could set amount of times elements are moved to increase/decrease probability of some images being in the same place.

Upvotes: 0

mgso
mgso

Reputation: 1

<!DOCTYPE html>
<html>
    <head>
        <title>Memory Match Game</title>
        <style>
            * {
                padding:0;
                margin:0;
                box-sizing: border-box;
            }
            
            body {
                height:100vh;
                background: blue;
            }
            
            .memoryGame {
                width: 70vw;
                height: 70vh;
                border: 3px solid red;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: auto;
            }
            
            .card {
                background-image: url(pattern.jpg);
                position: relative;
                border: 2px solid blue;
                width: calc(25% - 10px);                  
                margin: 5px;
            }
            
            .frontSide {
                position: absolute;
                border: 5px solid deeppink;
                height: 100%;
                width: 100%;
            }
            
            .backSide {
                position: relative;
                height: 80%;
                width: 80%;
                visibility: hidden;
                margin: 10%;
            }
            .card:hover {
                border: 2px solid white;
            }               
          
        </style>
    </head>
    <body>
       
       <h1 style='color: deeppink'>Memory Match Game</h1>
       <p>Time Elapsed: </p>
       <p id='timer'></p>

    <section class='memoryGame' id='memoryGame'>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
      
    </div>       
    
    </section>
        <script>
            
      let game = document.getElementById('memoryGame');
      game.onclick = function (e) {
          let target = e.target;
          if (target.className === 'card') {
              showCard.call(target)
          }
      }


      function showCard() {
      let img = this.children[0]
          img.style.visibility = 'visible';
      }
      
            
            
        </script>
    </body>
</html>

Upvotes: 0

Nik
Nik

Reputation: 1709

Check following code snippet derived from your code snippet.

I've added flip class to div outer to img element, also added the click event listener to same.

Also modified the css accordingly.

         
      let firstCard, secondCard;
      let hasFlippedCard = false;
            
            
   
      let cards = document.querySelectorAll('.card');
            //i tried => card.style.visibility = 'hidden':
            //i can put card.hidden = false and then make the
       //   statement true in my showCard func and works
        //  but not in 
             // reverse
      cards.forEach(card => card.classList.add('flip'));
      cards.forEach(card => card.addEventListener('click', showCard));

      
      
    
            
            
      function showCard() {
       this.classList.toggle('flip');
        //this.style.visibility= 'visible';
          
      }
      
            
            * {
                padding:0;
                margin:0;
                box-sizing: border-box;
            }
            
            body {
                height; 100vh;
                background: blue;
            }
            
            .memoryGame {
                width: 70vw;
                height: 70vh;
                border: 3px solid red;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: auto;
            }
            
            .card {
                background-image: url(pattern.jpg);
                position: relative;
                border: 2px solid blue;
                width: calc(25% - 10px);
                height:calc (25% - 10px);
                margin: 5px;
            }
            
            .frontSide {
                position: absolute;
                border: 5px solid deeppink;
                height: 100%;
                width: 100%;
            }
            
            .backSide {
                position: relative;
                height: 80%;
                width: 80%;
                  
                margin: 10%;
            }
            .card:hover {
                border: 2px solid white;
            }
            .flip {
                background: #0F0;
            }
            .flip > img {
                visibility: hidden;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Memory Match Game</title>
        <style>
        </style>
    </head>
    <body>
       
       <h1 style='color: deeppink'>Memory Match Game</h1>
       <p>Time Elapsed: </p>
       <p id='timer'></p>

    <section class='memoryGame'>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
      
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='meerkat.jpg' alt='dog'>

    </div>
    <div class='card'>
        <img class='backSide' src='meerkat.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='tiger.jpg' alt='dog'>
      
    </div>
    <div class='card'>
        <img class='backSide' src='tiger.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='bird.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='bird.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='penguin.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide' src='penguin.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='pig.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='pig.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='owl.jpg' alt='dog'>

    </div>
    <div class='card'>
        <img class='backSide' src='owl.jpg' alt='dog'>
        
    </div>
    
    </section>

    </body>
</html>

Hope this helps.

Upvotes: 0

Andrew Dibble
Andrew Dibble

Reputation: 901

Try this maybe:

function showCard() {
  this.toggleClass('flip');
}

The issue is after the first click, the flip class had been removed from that element and you never added it back on. This function will toggle that class on and off with every click, rather than just off.

Upvotes: 0

Shubham
Shubham

Reputation: 351

Use this instead

div.classList.replace("backside", "backside flip");

Upvotes: 1

Related Questions