CODEWITHSUNDEEP
javascripthtml
Антон Портнянко
Антон Портнянко

Reputation: 373

How can I show different text on click depending on object shown?

i have an array of different images that are changing after clicking on them, basically they have 2 states - back and front, only front image is changing, my goal is to show different text that depends on the name of front image that is currently shown, so if I have 1.img the text is "Examle 1 text" and if it is 2.img the text is "Example 2 text". I have tried different solutions but they didn't work as expected.

JAVASCRIPT:

// Part for turning images
var images = [];

(function() {
    generateCards()
})()

var cards = document.querySelectorAll('.card')

Array.from(cards).forEach(function(card) {
    card.addEventListener('click', function() {
        Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {
            ['back', 'front'].forEach(function(s) {
                el.classList.toggle(s)
            });
        });
    });
});

//Dispalying different images on click
function cardImg(index) {
    var cardNewImg = randomIntFromInterval(2, 10);
    if (images[index] !== undefined) {
        images[index] = -1;
    }
    while (images.indexOf(cardNewImg) != -1) {
        cardNewImg = randomIntFromInterval(2, 10);
    }
    images[index] = cardNewImg;
}

function generateCards() {
    for (var i = 0; i < 3; i++) {
        cardImg(i);
    }
}

function getCard(index) {
    if (!images[index].valid) {
        cardImg(index)
    }
    document["randimg" + (index + 1)].src = "./img/" + images[index] + ".jpg";
}

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Card</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="wrap">
        <div class="card">
            <div class="front" onClick="getCard(0)"><img src="./img/1.jpg" alt=""></div>
            <div class="back"><img src="./img/2.jpg" name="randimg1"></div>
        </div>
        <div class="card">
            <div class="front" onClick="getCard(1)"><img src="./img/1.jpg" alt=""></div>
            <div class="back"><img src="./img/2.jpg" name="randimg2"></div>
        </div>
        <div class="card">
            <div class="front" onClick="getCard(2)"><img src="./img/1.jpg" alt=""></div>
            <div class="back"><img src="./img/2.jpg" name="randimg3"></div>
        </div>
    </div>
    <div class="hidden1">Text 1</div>
    <div class="hidden2">Text 2</div>
    <div class="hidden3">Text 3</div>
    <div class="hidden4">Text 4</div>
    <div class="hidden5">Text 5</div>
    <div class="hidden6">Text 6</div>
    <script src="jquery.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

Thanks, any help would be appreciated!

Upvotes: 0

Views: 419

Answers (1)

azrahel
azrahel

Reputation: 1213

var cards = document.querySelectorAll('.card')

On click you can get img src attribute and display proper text:

Disclaimer before you read code:

In below code I assume that quantity of imgs and divs with hidden text is the same and both imgs and hidden divs are already there in DOM structure.

HTML

<div class="card">
  <div class="front"><img src="./img/1.jpg"></div>
  <div class="back"><img src="./img/2.jpg" name="randimg1"></div>
</div>
<div class="card">
  <div class="front"><img src="./img/1.jpg"></div>
  <div class="back"><img src="./img/4.jpg" name="randimg2"></div>
</div>
<div class="card">
  <div class="front"><img src="./img/1.jpg"></div>
  <div class="back"><img src="./img/6.jpg" name="randimg3"></div>
</div>


<div class="hidden">Text 1</div>
<div class="hidden">Text 2</div>
<div class="hidden">Text 3</div>
<div class="hidden">Text 4</div>
<div class="hidden">Text 5</div>
<div class="hidden">Text 6</div>

CSS

img {
  width: 50px;
  height: 50px;
  border: 1px solid black; 
}

.hidden {
  visibility: hidden;
}

Javascript

document.addEventListener('DOMContentLoaded', () => {
  var fronts = document.querySelectorAll('.front')

  fronts.forEach(function(front) {
      const hiddenTextsElements = document.querySelectorAll(".hidden")
      const imgs = document.querySelectorAll("img")
      
      //attaching click events to show random hidden div on each .front click
      front.addEventListener('click', function(e) {
        console.log(e.target)
          const clickedImgSrc = e.target.getAttribute("src")
          const randomHiddenTextNumber = parseInt(Math.random() * hiddenTextsElements.length)

          hiddenTextsElements[
            randomHiddenTextNumber
          ].style.visibility = "visible"

      });
  }); 
});

Codepen:

https://codepen.io/anon/pen/ZMVpWK?editors=1011

Upvotes: 1

Related Questions