{"id":23068,"date":"2022-11-23T15:22:18","date_gmt":"2022-11-23T09:52:18","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/"},"modified":"2022-11-23T15:22:18","modified_gmt":"2022-11-23T09:52:18","slug":"solved-locating-two-array-images-that-are-equal","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/","title":{"rendered":"[Solved] Locating two Array images that are equal"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

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.<\/p>\n

The CSS I added is not important, just there to make the example look a little nicer.<\/p>\n<\/p>\n

\n
\n
var myImages = \r\n    [\"http:\/\/fillmurray.com\/100\/100\",\r\n    \"http:\/\/fillmurray.com\/125\/125\",\r\n    \"http:\/\/fillmurray.com\/150\/150\"];\r\nvar shuffle = document.getElementById('shuffle');\r\nvar img1 = document.getElementById('img1');\r\nvar img2 = document.getElementById('img2');\r\nvar result = document.getElementById('result');\r\nvar msg = \"\";\r\n\r\nshuffle.onclick = function() {\r\n\r\n   var rand1 = myImages[Math.floor(Math.random()*myImages.length)];\r\n   var rand2 = myImages[Math.floor(Math.random()*myImages.length)];\r\n\r\n   img1.innerHTML = \"<img src=\"\"+rand1+\"\"\/>\";\r\n   img2.innerHTML = \"<img src=\"\"+rand2+\"\"\/>\";\r\n    console.log(rand1 + \" \" + rand2);\r\n   if (rand1 == rand2) {\r\n     msg = \"Images Match!\";\r\n   } else {\r\n     msg = \"Images Do Not Match!\"\r\n   }\r\n\r\n   result.innerHTML = msg;\r\n};<\/code><\/pre>\n
.wrapper {\r\n  display: flex;\r\n  justify-content: left;\r\n  align-items: center;\r\n }\r\n.wrapper div {\r\n  border: 1px solid black;\r\n  min-width: 150px;\r\n  min-height: 150px;\r\n}<\/code><\/pre>\n
<div class=\"wrapper\">\r\n  <div id=\"img1\">&nbsp;<\/div>\r\n  <div id=\"img2\">&nbsp;<\/div>\r\n    <button id='shuffle'>Shuffle<\/button>\r\n<\/div>\r\n<div id=\"result\"><\/div><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            5<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Locating two Array images that are equal <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] 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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,333],"class_list":["post-23068","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript"],"yoast_head":"\n[Solved] Locating two Array images that are equal - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Locating two Array images that are equal - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] 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 ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-23T09:52:18+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Locating two Array images that are equal\",\"datePublished\":\"2022-11-23T09:52:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/\"},\"wordCount\":134,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/\",\"name\":\"[Solved] Locating two Array images that are equal - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-23T09:52:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Locating two Array images that are equal\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Locating two Array images that are equal - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Locating two Array images that are equal - JassWeb","og_description":"[ad_1] 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 ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/","og_site_name":"JassWeb","article_published_time":"2022-11-23T09:52:18+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Locating two Array images that are equal","datePublished":"2022-11-23T09:52:18+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/"},"wordCount":134,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/","url":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/","name":"[Solved] Locating two Array images that are equal - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-23T09:52:18+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-locating-two-array-images-that-are-equal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Locating two Array images that are equal"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/23068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=23068"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/23068\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=23068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=23068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=23068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}