Member Avatar for arda_1

<!DOCTYPE html> <html> <body> <script type="text/javascript">

      var images = ["strawberry.jpg", "apple.jpg", "cherry.jpg", "orange.jpg", "pear.jpg"];


  var length = images.length;
  var randImg1 = Math.round(Math.random() * (length - 1));
  document.write('<img src="' + images[randImg1] + '" >');
  var randImg2 = Math.round(Math.random() * (length - 1));
  document.write('<img src="' + images[randImg2] + '" >');
  var randImg3 = Math.round(Math.random() * (length - 1));
  document.write('<img src="' + images[randImg3] + '" >');

  if (randImg1 == randImg2 && randImg2 == randImg3 && randImg3 == "strawberry.jpg") {

  }

</script> </body> </html>

I want to compare the images of the arrays, if 3 images are strawberry there should be an alert box like "congrats you won" how can I do that ?

  • 3 Contributors
  • 4 Replies
  • 280 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by mblan180131

Dani AI

Generated

Three quick problems in the original approach: the random index generation is biased when you use Math.round, the chained comparison randImg1 == randImg2 == randImg3 does not do what you expect, and document.write + a blocking alert() can make the page behave oddly (images may not paint before the alert appears). was right to flag the comparison, and was on the right track about waiting for load — but a clearer, more robust pattern is to (1) pick indices with Math.floor, (2) inject <img> elements into a container instead of document.write, and (3) only show the win message after the browser has had a chance to render (or after images have loaded).

A compact, safe example (put a <div id="slots"></div> in the body and run this script after it):

<div id="slots"></div>

<script>
const images = ['strawberry.jpg','apple.jpg','cherry.jpg','orange.jpg','pear.jpg'];
const picks = Array.from({length:3}, () => images[Math.floor(Math.random()*images.length)]);
const container = document.getElementById('slots');

picks.forEach(src => {
  const img = document.createElement('img');
  img.src = src;
  container.appendChild(img);
});

const win = picks.every(s => s === 'strawberry.jpg');

// let the browser paint the images, then show the alert
if (win) requestAnimationFrame(() => alert('congrats you won'));
</script>

Notes and troubleshooting: use === for strict comparisons; avoid chaining equality checks (always use a === b && b === c or check the filenames with every). If you need to be extra-certain the images finished loading, attach img.onload counters and trigger the win logic only when all three onload handlers have fired. Finally, confirm the image paths are correct (use DevTools → Network/Console for 404s) and avoid document.write in modern code.

Recommended Answers

All 4 Replies

Member Avatar for rproffitt

Line 23 looks off. randImg are numeric so without me testing it, try

if (randImg1 == randImg2 == randImg3 && images[randImg3] == "strawberry.jpg") {
Member Avatar for arda_1

I think it worked but when the strawberry images are matched i cannot see the images on the screen , i just see the alert box message that i wrote "congrats you won".

Member Avatar for rproffitt

Perils of using document.write. That queues up that to be done after your javascipt exits (well at least here.)

You may want to use other than document.write. Or change the alert to your document.open code.

Member Avatar for mblan180131

try this to fix your images not loading and the alert checking system:

window.onload = function() {
    if (randImg1 == randImg2 == randImg3 && images[randImg3] == "strawberry.jpg") {
        alert("You Won!");
    }
};

Window.onload = function() {} basically says "When the document is totally and completely loaded, do this in the function." It will load all your images to the image box and THEN, when they are loaded, alert the user that they have won.

Edited by mblan180131
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.