Show the local weather Switch stmt to show images


I am having a lot of trouble getting my switch statement to display anything. I am not sure what I missing to get the switch to change the images.


Your assigning to conditions the function you want to use but you never call it, also at the top of the function you change img to all lowercase but keep capitals in your switch cases.


Thanks so much for your response. I fixed the upper case in my case statements. I do see I dont call img anywhere, but im not sure how I am supposed to be calling it in order to get it to display as the background. is it something like “background-image.img”? im having a hard time understaning how my javascript interacts with css and html in this scenario.


At line 25, you define a variable called conditions then at line 46 you assign it to a function that will change your background image, this is confusing and I would recommend creating a new variable for the function with a more suitable name. Next you would need to call that function with[0].main as an argument. You did fine connecting javascript with the html and css.

$("#someElement").css("color", "red");

is changing #someElement’s css color to red.

CSS equivalent:

$("#someElement").html("Stuff here")

is changing #someElement’s html.
HTML equivalent:

<div id="someElement">Stuff Here</div>


Alright, so my CSS calls are good, Im still having trouble getting the function to work. I must be missing something simple. I’ve reworked this a dozen times or so with images still not showing up. here is I think as close as Ive come.

 function backgroundImg(cond) {
    cond = cond.toLowerCase();
      switch (cond) {
      case 'clouds':
        $('#background').css("background-image", "url(");    
      case 'rain':
        $('#background').css("background-image", "url(");
      case 'snow':
        $('#background').css("background-image", "url(");
      case 'clear':
        $('#background').css("background-image:", "url(");
      case 'thunderstom':
       $('#background').css("background-image", "url(");
        $('#backgroud').css("background-image", "url(");


You have two problems:

Problem #1) You have the following array declared:

and then you have a function with the same name of the array

function backgroundImg(cond) {
 // lots of code here using case statement

The problem here is the function declaration is “hoisted” to the top by the JS Engine, so when even though you declare your array with the same name before the function declaration, JS sees backgroundImg as an array because of the assignment. Read the section called Functions First in Chapter 4 of the JDKJS series for further explanation.

var say = "Hello";
function say() {
say(); // produces error that states say is not a function.  **say** is a string in this case.

Problem #2) If you fix the first problem above, then you will just have to fix one more thing in your function called backgroundImg. You were extremely close to the correct syntax for changing the background image using Jquery:

You are using this syntax:

$('#backgroud').css("background-image", "url(yourUrlGoesHere)");

but the proper syntax is:

$("#background").css({"background-image": "url(yourUrlGoesHere)"}); 

Just needed to put a colon instead of a comma


That did it. That got me through it! functionality is working. Thank you so much for the advice!! I appreciate your time. Now to make it look nice…


FYI - You have a typo on the word background in your default switch case:

        $("#backgroud").css({"background-image": "url("});

You have #backgroud and it should be #background