CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nonono
nonono

Reputation: 601

Change background based on text

Fiddle: https://jsfiddle.net/hanyb9da/

I want the page background to change to a background image that goes with the random quote displayed. The quotes work if I take out that changeBack function, as you can see here.

What I did was create a for loop and tried to use jQuery to change the background depending on the quote in the array, but it didn't work.

Full js:

$(document).ready(function() {
  var quotes = [
    "It's not the years, honey. It's the mileage.",
    "You see, in this world there's two kinds of people, my friend: Those with loaded guns and those who dig. You dig.",
    "I'll make him an offer he can't refuse.",
    "May the Force be with you.",
    "We buy things we don't need with money we don't have to impress people we don't like.",
    "Bond, James Bond.",
    "Heeere's Johnny!",
    "Hasta la vista, baby.",
    "Zed's dead, baby. Zed's dead."
  ];

  function getQuote() {
    return Math.floor(Math.random() * quotes.length);

  }

  $('#random-quote').click(function() {
    $('#main-quote').text(quotes[getQuote()]);
  });

  function changeBack() {
    var which = quotes.length;
    for (i = 0, i < which, i++) {
      if (which[i] === quotes[0]) {
        $("body").css("background-image", "url(https://images2.alphacoders.com/865/86520.jpg) no-repeat;");
      };
      else if (which[i] === quotes[1]) {
        $("body").css("background-image", "url(https://images3.alphacoders.com/238/238127.jpg) no-repeat;");
      };
      else if (which[i] === quotes[2]) {
        $("body").css("background-image", "url(http://g01.a.alicdn.com/kf/HTB1uqc0KVXXXXbsapXXq6xXFXXXC/Living-room-home-wall-decoration-fabric-poster-The-font-b-Godfather-b-font-font-b-movies.jpg) no-repeat;");
      };
      else if (which[i] === quotes[3]) {
        $("body").css("background-image", "url(https://stiggyblog.files.wordpress.com/2012/12/star-wars-a-new-hope-1977-factors-commercial-poster-by-hildebrandt.jpg) no-repeat;");
      };
      else if (which[i] === quotes[4]) {
        $("body").css("background-image", "url(http://wallpapercave.com/wp/oj4WPgT.png) no-repeat;");
      };
      else if (which[i] === quotes[5]) {
        $("body").css("background-image", "url(http://www.fotoloncho.com/fotos3/Revista%20Bond%201.jpg) no-repeat;");
      };
      else if (which[i] === quotes[6]) {
        $("body").css("background-image", "url(http://65.media.tumblr.com/ea930b76c8d84d9298910986efbb8082/tumblr_ngh0ohinb51rp2eyqo1_500.png) no-repeat;");
      };
      else if (which[i] === quotes[7]) {
        $("body").css("background-image", "url(http://imgs.abduzeedo.com/files/francois/mysterybox/terminator_1.jpg) no-repeat;");
      };
      else(which[i] === quotes[8]) {
        $("body").css("background-image", "url(http://1.bp.blogspot.com/-nIZXRMrbV5w/U5aannDQ7-I/AAAAAAAAMoQ/B81iFTid3rM/s1600/PULP+FICTION+-+UK+Poster+1.jpeg) no-repeat;");
      };


    };

  };

});

Thanks!

Upvotes: 0

Views: 134

Answers (3)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

$(document).ready(function() {
  

  $('#random-quote').click(function() {
    var quotes = [
{"quote": "It's not the years, honey. It's the mileage.", "background": "/images/bg1.jpg"},
{"quote": "Quote 2.", "background": "/images/bg2.jpg"},
{"quote": "Quote 3.", "background": "/images/bg3.jpg"}
];
    
    var randomIndex = Math.floor(Math.random() * quotes.length);
    var selectedQuote = quotes[ randomIndex ];

    $('#main-quote').text( selectedQuote.quote );
    var selectedBG = selectedQuote.background;
    console.log( selectedBG );
    // $("body").css("background-image", "url('"+selectedBG+"')");
  });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-quote"></div>
<button id="random-quote">Random Quote</button>

Upvotes: 1

Arif
Arif

Reputation: 1645

dont use array of string. Instead use array of objects like showen below

  var quotes = [
      {
          text:"It's not the years, honey. It's the mileage.",
          background: "url(https://images2.alphacoders.com/865/86520.jpg) no-repeat;"
      },
      {
          text:"You see, in this world there's two kinds of people, my friend: Those with loaded guns and those who dig. You dig.",
          background: "url(http://g01.a.alicdn.com/kf/HTB1uqc0KVXXXXbsapXXq6xXFXXXC/Living-room-home-wall-decoration-fabric-poster-The-font-b-Godfather-b-font-font-b-movies.jpg) no-repeat;"
      },
      {
          text:"May the Force be with you.",
          background: "url(http://wallpapercave.com/wp/oj4WPgT.png) no-repeat;"
      }
  ];

and here is the Fiddle. you can edit it to fullfil your needs

FIDDLE

Upvotes: 1

R. Foubert
R. Foubert

Reputation: 653

You should not do it like that... it's really heavy and you cannot change easily the order of your quotes... It would be better if your quotes array was an array of quotes objects. Each quote would have a text property and a class property like that : 

var quotes = [
  {text: "It's not the years, honey. It's the mileage.", className: "years"},
  {text: "May the Force be with you.", className: "starwars"}// etc...
];

After that you just have to change the classname of the element depending on the class of the quote. Then you manage the background images in a css file. Hope it helps.

EDIT: each time you want to add a new quote you'' just have to add a new quote in the array and a new css rule. It will be faster and easier to manage for you.

Upvotes: 2

Related Questions