How can I display random photo and text from an array?

Question

I'm building a movie suggestion app that will suggest movies based on the weather of the users geo-location.

The main problem I'm having is that I would like to be able to make it a random title and poster of the movie from the selection of movies that are attached to a single weather condition.

Right now I have a button that in my html that basically just moves you down the list and stops at the last one. How can I make it so the button generates a random movie title and the poster to go along with it?

    if (icon === "wind") {
    $("#jumbo").css(
      "background-image",
      "url(https://www.movieposter.com/posters/archive/main/66/MPW-33473)"
    );
    $("body").css(
      "background-image",
      "url(https://i.ytimg.com/vi/Gfr8MExtDYI/maxresdefault.jpg)"
    );
    $("#cTemp").html("Twister");
    $("#new").click(function() {
      $("#jumbo").css(
        "background-image",
        "url(https://images-na.ssl-images-amazon.com/images/I/517KxZHTGGL.jpg)"
      );

      $("#cTemp").html("Cast Away");
      $("#new").click(function() {
        $("#jumbo").css(
          "background-image",
          "url(http://www.gstatic.com/tv/thumb/movieposters/34439/p34439_p_v8_au.jpg)"
        );

        $("#cTemp").html("The Day After Tomorrow");
        $("#new").click(function() {
          $("#jumbo").css(
            "background-image",
            "url(http://www.gstatic.com/tv/thumb/movieposters/193479/p193479_p_v8_an.jpg)"
          );

          $("#cTemp").html("2012");
          $("#new").click(function() {
            $("#jumbo").css(
              "background-image",
              "url(https://i.pinimg.com/originals/dc/0c/ff/dc0cff626f513bd5fc74bb9dbde70f17.jpg)"
            );

            $("#cTemp").html("Gone With The Wind");
            $("#new").click(function() {
              $("#jumbo").css(
                "background-image",
                "url(https://images-na.ssl-images-amazon.com/images/I/81dTEnx805L._RI_.jpg)"
              );

              $("#cTemp").html("The Perfect Storm");
            });
          });
        });
      });
    });
  }

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/random — Radonirina Maminiaina, Apr 07 '18 at 20:32
Put the target items into an array, use Math.random to generate a random number [0..1) then use this to create an index into the array. — enhzflep, Apr 07 '18 at 20:34
Please see [*How to create a minimal, complete and verifiable example*](https://stackoverflow.com/help/mcve). There is a lot of irrelevant code in your question and no obvious attempt at your own solution. — RobG, Apr 07 '18 at 20:35

How can I display random photo and text from an array?

0 Answers0