Incorporate a background image with the JavaScript CSS property

Question

Incorporate a background image with the JavaScript CSS property

I'm having trouble adding a background image using the Javascript CSS property in my code. When I directly add the 'url', it works fine. Could the issue be with the 'weatherImage' variable?

Javascript

var OpenWeatherKey = 'API key';
var locationUrl =  'http://freegeoip.net/json/';

function getLocation(){
    $.ajax({
        url : locationUrl,
        dataType: "json",
        success : function(data){
            var country = data['country_name'];
            var city = data['city'];
            var latitude = data['latitude'];
            var longitude = data['longitude'];
            $('#location').html(city + ', ' + country);
      var Weather = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude +"&APPID=" +OpenWeatherKey;
            getWeather(Weather);

                    }
    });
}
function getWeather(url){
    $.ajax({
        url:url,
        dataType:"json",
        success: function(data){
        var weather = data['weather'][0]['main'];
        var temp = data['main']['temp'];
      var icon = data['weather'][0]['icon'];
      var id = data['weather'][0]['id'];
        document.getElementById('icon').src="http://openweathermap.org/img/w/" + icon + ".png";
        $('#weather').html(weather);
        $('#temp').html(temp);
   // Change F to C, C to F 
  var fahrenheit = Math.floor((temp) * 9/5 - 459.67) + '\xB0F';
  var celsius = Math.floor((temp)- 273.15) + '\xB0C';


  var $tempDisplay = $("#temp");
  $tempDisplay.html(celsius);
  $("#button-f").on('click', function() {
    $tempDisplay.html(fahrenheit);
  });
  $("#button-c").on('click', function() {
    $tempDisplay.html(celsius);
  });

  // change Background image 
  var imagePhoto = {
    thunder: "http://www.tabinotebook.com/wp-content/uploads/2017/02/jeremy-bishop-72584.jpg",
        rainy: "http://www.tabinotebook.com/wp-content/uploads/2017/02/lukas-budimaier-131299.jpg",
        cloudy: "http://www.tabinotebook.com/wp-content/uploads/2017/02/odair-faleco-192489.jpg",
        snow: "http://www.tabinotebook.com/wp-content/uploads/2017/02/james-padolsey-154227.jpg",
        sunny: "http://www.tabinotebook.com/wp-content/uploads/2017/02/tomas-salas-81161.jpg",
  }
  var weatherImage = "";
  function selectImage (id){
  if(id >= 200 && id <= 232){
    weatherImage = imagePhoto.thunder;}
  else if (id >= 300 && id <= 531){
     weatherImage = imagePhoto.rainy;}       
  else if (id >= 600 && id <= 622){
     weatherImage = imagePhoto.snow;}   
   else if (id >= 801 && id <= 804){
     weatherImage = imagePhoto.cloudy;}
  else if (id === 800){
     weatherImage = imagePhoto.sunny;}
  else { 
    weatherImage = imagePhoto.cloudy;}
    }

 // we set the background first after the weatherImage has been assigned a value
    // above
$('body').css('background-image','url(' + weatherImage + ')');


 selectImage(800);
        }
        });
    };



getLocation();

Thank you for your help.

javascript jquery html css background-image

Answer 1

Answer №1

If you want the actual content of the variable weatherImage to be added, then you need to update your code. Currently, you are just setting the URL to the name of the variable. Try changing your code snippet to:

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

It's a bit tricky to pinpoint what exactly isn't working since we don't have access to the full script and aren't sure where or how you call selectImage(). However, the following modified code should function properly:

// Modify the API key according to your requirements
var OpenWeatherKey = 'your-api-key';
var locationUrl =  'http://freegeoip.net/json/';
var weatherImage = "";
var imagePhoto = {
   thunder: "http://www.tabinotebook.com/wp-content/uploads/2017/02/jeremy-bishop-72584.jpg",
   rainy: "http://www.tabinotebook.com/wp-content/uploads/2017/02/lukas-budimaier-131299.jpg",
   cloudy: "http://www.tabinotebook.com/wp-content/uploads/2017/02/odair-faleco-192489.jpg",
   snow: "http://www.tabinotebook.com/wp-content/uploads/2017/02/james-padolsey-154227.jpg",
   sunny: "http://www.tabinotebook.com/wp-content/uploads/2017/02/tomas-salas-81161.jpg"
};

function selectImage (id) {
   if(id >= 200 && id <= 232) {
       weatherImage = imagePhoto.thunder;
   }
   else if (id >= 300 && id <= 531) {
       weatherImage = imagePhoto.rainy;
   }       
   else if (id >= 600 && id <= 622) {
       weatherImage = imagePhoto.snow;
   }   
   else if (id >= 801 && id <= 804) {
      weatherImage = imagePhoto.cloudy;
   }
   else if (id === 800) {
      weatherImage = imagePhoto.sunny;
   }
   else { 
      weatherImage = imagePhoto.cloudy;
   }
   // Set the background once weatherImage is assigned a value
   $('body').css('background-image','url(' + weatherImage + ')');
}

function getLocation(){
   $.ajax({
       url : locationUrl,
       dataType: "json",
       success : function(data){
           var country = data['country_name'];
           var city = data['city'];
           var latitude = data['latitude'];
           var longitude = data['longitude'];
           $('#location').html(city + ', ' + country);
           var Weather = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude +"&APPID=" +OpenWeatherKey;
           getWeather(Weather);
        }
    });
}

function getWeather(url){
   $.ajax({
       url:url,
       dataType:"json",
       success: function(data) {
          var weather = data['weather'][0]['main'];
          var temp = data['main']['temp'];
          var icon = data['weather'][0]['icon'];
          var id = data['weather'][0]['id'];
          document.getElementById('icon').src= "http://openweathermap.org/img/w/" + icon + ".png";
          $('#weather').html(weather);
          $('#temp').html(temp);
          // Convert temperature units from F to C and vice versa 
          var fahrenheit = Math.floor((temp) * 9/5 - 459.67) + '\xB0F';
          var celsius = Math.floor((temp)- 273.15) + '\xB0C';
          var $tempDisplay = $("#temp");
          $tempDisplay.html(celsius);
          $("#button-f").on('click', function() {
             $tempDisplay.html(fahrenheit);
          });
          $("#button-c").on('click', function() {
             $tempDisplay.html(celsius);
          });

          // Choose background image based on id
          selectImage(id);
       }
   });
};

getLocation();

Answer 2

If you want the actual content of the variable weatherImage to be added, then you need to update your code. Currently, you are just setting the URL to the name of the variable. Try changing your code snippet to:

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

It's a bit tricky to pinpoint what exactly isn't working since we don't have access to the full script and aren't sure where or how you call selectImage(). However, the following modified code should function properly:

// Modify the API key according to your requirements
var OpenWeatherKey = 'your-api-key';
var locationUrl =  'http://freegeoip.net/json/';
var weatherImage = "";
var imagePhoto = {
   thunder: "http://www.tabinotebook.com/wp-content/uploads/2017/02/jeremy-bishop-72584.jpg",
   rainy: "http://www.tabinotebook.com/wp-content/uploads/2017/02/lukas-budimaier-131299.jpg",
   cloudy: "http://www.tabinotebook.com/wp-content/uploads/2017/02/odair-faleco-192489.jpg",
   snow: "http://www.tabinotebook.com/wp-content/uploads/2017/02/james-padolsey-154227.jpg",
   sunny: "http://www.tabinotebook.com/wp-content/uploads/2017/02/tomas-salas-81161.jpg"
};

function selectImage (id) {
   if(id >= 200 && id <= 232) {
       weatherImage = imagePhoto.thunder;
   }
   else if (id >= 300 && id <= 531) {
       weatherImage = imagePhoto.rainy;
   }       
   else if (id >= 600 && id <= 622) {
       weatherImage = imagePhoto.snow;
   }   
   else if (id >= 801 && id <= 804) {
      weatherImage = imagePhoto.cloudy;
   }
   else if (id === 800) {
      weatherImage = imagePhoto.sunny;
   }
   else { 
      weatherImage = imagePhoto.cloudy;
   }
   // Set the background once weatherImage is assigned a value
   $('body').css('background-image','url(' + weatherImage + ')');
}

function getLocation(){
   $.ajax({
       url : locationUrl,
       dataType: "json",
       success : function(data){
           var country = data['country_name'];
           var city = data['city'];
           var latitude = data['latitude'];
           var longitude = data['longitude'];
           $('#location').html(city + ', ' + country);
           var Weather = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude +"&APPID=" +OpenWeatherKey;
           getWeather(Weather);
        }
    });
}

function getWeather(url){
   $.ajax({
       url:url,
       dataType:"json",
       success: function(data) {
          var weather = data['weather'][0]['main'];
          var temp = data['main']['temp'];
          var icon = data['weather'][0]['icon'];
          var id = data['weather'][0]['id'];
          document.getElementById('icon').src= "http://openweathermap.org/img/w/" + icon + ".png";
          $('#weather').html(weather);
          $('#temp').html(temp);
          // Convert temperature units from F to C and vice versa 
          var fahrenheit = Math.floor((temp) * 9/5 - 459.67) + '\xB0F';
          var celsius = Math.floor((temp)- 273.15) + '\xB0C';
          var $tempDisplay = $("#temp");
          $tempDisplay.html(celsius);
          $("#button-f").on('click', function() {
             $tempDisplay.html(fahrenheit);
          });
          $("#button-c").on('click', function() {
             $tempDisplay.html(celsius);
          });

          // Choose background image based on id
          selectImage(id);
       }
   });
};

getLocation();

Incorporate a background image with the JavaScript CSS property

Answer №1

Similar questions

Complete the modal window form

The "hover" effect is not activating on a carousel

Is there a way to remove a certain child category post from appearing in a parent category?

Passing variables to the ajax.done() function from within a loop - what you need to know

Using React.js to create table cells with varying background colors

Warning displayed on form input still allows submission

Having Difficulty with Mathematical Operators in AngularJS

Create a variety of elements in real-time

Tips for narrowing down table searches to only rows containing certain text within a column

jQuery DatePicker Not Displaying Calendar

Experience the click action that comes equipped with two unique functions: the ability to effortlessly add or remove a class

Using httpRequest to handle binary data in JavaScript

Is it permissible to assign the same element as a child to multiple parent elements in jQuery?

Trouble with CSS transitions not functioning while altering React state

Ajax is functional, however the server is not responding

Navigate to a specific hidden div that is initially invisible

Clicking on a link in HTML with the onclick event

Encountering the "ExpressionChangedAfterItHasBeenCheckedError" in Angular 2

The JSON data sent from the primary Electron process is arriving as undefined in the renderer

Retrieve all chosen option elements from every select element within a form