单击按钮更改背景图像（使用jQuery和API）

Question

I am using an API that returns an random URL to a random image and set that to the background-image of the body. How can I make that to change after every click of a button? I have the code below, but that doesnt work.

function changeImage() {

          $.getJSON("https://api.unsplash.com/photos/random?client_id=336b527b2e18d045045820b78062b95c825376311326b2a08f9b93eef7efc07b", function(result){

           var randomPhoto = result.urls.full;

      console.log(randomPhoto);

      $('body').css('background-image', 'url(randomPhoto)');

      });


   }; 

I use a jQuery click event on the button to call the function.

$("#button").on("click", function() {


    changeImage();


    });

});

function loads a new JSON object with image every time, but the background-image doesnt change...

Answer 1

As DynoMyte suggested, you should do this instead:

function changeImage() {
    var src = "https://api.unsplash.com/photos/random?client_id=336b527b2e18d045045820b78062b95c825376311326b2a08f9b93eef7efc07b";
    $.getJSON(src, function(result){
        $('body').css('background-image', 'url('+ result.urls.full +')');

    });
}; 

Answer 2

Change this:

$('body').css('background-image', 'url(randomPhoto)');

To this:

 $('body').css('background-image', 'url('+randomPhoto+')');