0

On my website I'm displaying an image which i styled with css to be a card. With a hover effect you can flip the card (frontside is the image) and read an image description on the back side. Further I added a button "Shuffle" which replaces the image with a new one selected random out of an array.

My problem: If the new image is selected, the image description of course stays the same. Is it somehow possible to not only connect the image to an array value but also the fitting text for the description as every image needs an individual description? (Code at the bottom)

Thanks!

<body>
    <div class="maincontainer">
    <div class="thecard">
    <div class="thefront">
      <img src="images/meme1.jpg" id="picture1"/>
    </div>
    <div class="theback">Picture1 Description</div>
    </div>
    </div>

    <button onClick="shuffle();">SHUFFLE</button>

    <script type="text/javascript">
    function shuffle(){
    var images1 = [],
    index1 = 0;
    images1[0] = "images/meme2.jpg";
    images1[1] = "images/meme3.jpg";
    images1[2] = "images/meme4.jpg";
    index1 = Math.floor(Math.random() * images1.length);
    document.getElementById("picture1").src = images1[index1];
  }
    </script>
  </body>
Nikey63
  • 39
  • 6
  • 1
    Probably easiest to have a parallel description array of the same length, i.e. `var descriptions = []; description[0] = "Desc 1";` etc. Then just use the same index `index1` to update the description. – user2740650 Dec 30 '20 at 20:37
  • Please note that with your strategy the first picture will never be shown again. – Michiel Dec 30 '20 at 20:41
  • 1
    @user2740650 Actually, it's a lot easier to just store the data in objects than to manage a second array that has to be kept in sync with the first one. – Scott Marcus Dec 30 '20 at 20:42
  • @ScottMarcus I'd say "better", but not "easier" for a beginner. A single array of objects is the approach I would use for sure in my own code. I considered suggesting it, but I figured the parallel array approach is easier for a beginner to follow (and would require fewer changes to the existing code). – user2740650 Dec 30 '20 at 21:20
  • @user2740650 I can understand why you'd say that, but consider what happens when a third piece of information needs to be stored or if a change to the data needs to be made (which will certainly happen at some point). The maintenance of the parallel array solution makes it clear that it's really not the easier approach. – Scott Marcus Dec 30 '20 at 21:24
  • I completely agree of course. Nikey63, if this is anything more than a quick and dirty project, consider adopting the style in @ScottMarcus's answer. In the long term it will pay off. – user2740650 Dec 30 '20 at 21:45

3 Answers3

1

Instead of just storing the image URL in an array, store the URL and the description in objects and put the objects into an array:

function shuffle(){
  var images1 = [];
  images1.push({url:"images/meme1.jpg", description: "meme 1"});
  images1.push({url:"images/meme2.jpg", description: "meme 2"});
  images1.push({url:"images/meme3.jpg", description: "meme 3"});
  images1.push({url:"images/meme4.jpg", description: "meme 4"});
  images1.push({url:"images/meme5.jpg", description: "meme 5"});
  
  var index1 = Math.floor(Math.random() * images1.length);
  
  console.log(images1[index1].url, images1[index1].description);
}

shuffle();
shuffle();
shuffle();
shuffle();
shuffle();
shuffle();
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
1

Instead of storing only the images, you can store the description too. In this case you need to make an array of objects: this is how it is supposed to look like:

let images = [
    {
        src: './image.png', //source of the image
        description: 'This is an image' //Description of the image
    }
]

Then shuffle this array just like you shuffled the old array.

Hef
  • 606
  • 6
  • 16
0
function shuffle(){
    var images1 = [], descriptions = [],
    index1 = 0;
    images1[0] = "images/meme2.jpg";
    images1[1] = "images/meme3.jpg";
    images1[2] = "images/meme4.jpg";
    descriptions[0] = "Picture2 Description";
    descriptions[1] = "Picture3 Description";
    descriptions[2] = "Picture4 Description";
    index1 = Math.floor(Math.random() * images1.length);
    document.getElementById("picture1").src = images1[index1];
    document.getElementsByClassName("theback")[0].innerText = descriptions[index1];
  }
Michiel
  • 344
  • 2
  • 9
  • 1
    `document.getElementsByClassName("theback")[0]` is [really bad code](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) and having to maintain two arrays and keep them in sync is additional work that doesn't scale very well. – Scott Marcus Dec 30 '20 at 20:57