l-emi l-emi - 1 year ago 53
Javascript Question

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() {

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;");





Answer Source

$(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>