Use a variable in jquery .css()?

Question

I'm trying to use an api call to change the background of a div based on the current weather. The url is not working in the last line. If I add a path from a file in my folders it works, but not when I try to add a variable as the url path. Is there a workaround to use a variable in the url path? Here's what I have:

function loadImage(conditions){
    var imageSRC = "img/weather/hero-";
    var validConditions = ["clear", "cloudy", "rain", "snow"];
    var timeOfDay = getTimeOfDay();
    conditions = conditions.toLowerCase();
    if (validConditions.indexOf(conditions) === -1) {
        conditions = "cloudy";
    } else {
        conditions = conditions;
    }
    console.log(conditions);

    var apiImg = imageSRC + conditions + ".jpeg";
    console.log(apiImg);

    $('#intro').css("background-image", 'url(apiImg)');
}

$('#intro').css("background-image", 'url('+apiImg+')');

Álvaro Touzón
– Álvaro Touzón

2017-02-16 19:23:45 +00:00
Commented Feb 16, 2017 at 19:23 — Álvaro Touzón
– Álvaro Touzón, Commented Feb 16, 2017 at 19:23

Antonio · Accepted Answer · 2017-02-16 19:26:23Z

2

Use strings concatenation:

$('#intro').css("background-image", 'url(' + apiImg + ')');

or ES6 template literals:

$('#intro').css("background-image", `url(${apiImg})`);

answered Feb 16, 2017 at 19:26

Antonio

9015 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bribenn Over a year ago

Thanks for your answers! I used (' + apiImg + ') and it worked.

Collectives™ on Stack Overflow

Use a variable in jquery .css()?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related