How to display random images from array

Question

So im creating an app that helps you decide on a movie to watch. one of the functions on the app is a randomizer button which randomly displays a movie based on the genre you selected but not sure how to display the image. heres what i have so far. Thank you!

<body>
  <button id='randomBut'>RANDOMIZE</button>
                <div id='movieImg'><img src='movie1.svg'></div>
</body
<script>
var randomizer = document.getElementById("randomBut");
var randimg = document.getElementById("movieImg");
var movieimages = ["movie1.svg", "movie2.svg", "movie3.svg"];

document.getElementById("movieImg").innerHTML = movieimages;

randomizer.addEventListener("click", function(){
var randimg = document.createElement("img");
randimg.src = "movieimages" ;

</script>

You pick a random string from the array, then use that. – Alex K. Apr 12 '17 at 14:21 — Alex K., Apr 12 '17 at 14:21

score 0 · Answer 1 · answered Apr 12 '17 at 14:32

put the id on the image and then create a random number generator. use that random number and choose the image from the array and assign it to the image src

<button id='randomBut'>RANDOMIZE</button>
<div><img id='movieImg' src='http://placehold.it/100x100'></div>

<script>
  var randomizer = document.getElementById("randomBut");
  var randimg = document.getElementById("movieImg");
  var movieimages = ["http://placehold.it/100x100", "http://placehold.it/150x100", "http://placehold.it/100x150"];

  randomizer.addEventListener("click", function(){
    var randNum = Math.floor(Math.random() * movieimages.length) + 0  
    
    randimg.src = movieimages[randNum] ;
  });

</script>

How to display random images from array

1 Answers1