[Solved] Locating two Array images that are equal

by


I believe this example accomplishes what you’re after. Ultimately you have two identical image arrays so you really only need one. What you need is two random values from that single array and to test if they’re the same value. So in this example there’s a shuffle button with a click listener that pulls two random values from the images array, loads the images on screen, tests if they’re the same, and provides a visual result on screen. You could easily change that result to an alert, I just get tired of closing those windows.

The CSS I added is not important, just there to make the example look a little nicer.

var myImages = 
    ["http://fillmurray.com/100/100",
    "http://fillmurray.com/125/125",
    "http://fillmurray.com/150/150"];
var shuffle = document.getElementById('shuffle');
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var result = document.getElementById('result');
var msg = "";

shuffle.onclick = function() {

   var rand1 = myImages[Math.floor(Math.random()*myImages.length)];
   var rand2 = myImages[Math.floor(Math.random()*myImages.length)];

   img1.innerHTML = "<img src=""+rand1+""/>";
   img2.innerHTML = "<img src=""+rand2+""/>";
    console.log(rand1 + " " + rand2);
   if (rand1 == rand2) {
     msg = "Images Match!";
   } else {
     msg = "Images Do Not Match!"
   }

   result.innerHTML = msg;
};
.wrapper {
  display: flex;
  justify-content: left;
  align-items: center;
 }
.wrapper div {
  border: 1px solid black;
  min-width: 150px;
  min-height: 150px;
}
<div class="wrapper">
  <div id="img1">&nbsp;</div>
  <div id="img2">&nbsp;</div>
    <button id='shuffle'>Shuffle</button>
</div>
<div id="result"></div>

5

solved Locating two Array images that are equal