Having trouble changing the background image on my weather app

1

So I’m making the weather app and I’m at the point I need to make the background images change based on the type of weather (instead of temperature because it can be hot and raining or cold and super sunny)

The only issue is after implementing code which I thought should work, I’m not getting any results.
The two ways I’ve tried are as follows and neither is working for me.

way one: converting weather type variable to html string, checking if it includes the character/string i need, if it does, use that background image.

    if(weatherMain.html.includes("cloud")===true){
        
        $('body').css('background-image', "url('*****')");
        
      }

way two: same idea, but attempting to get the string from the html rather than the json… is it clear that I have no clue what I’m doing :sweat_smile:

     if($('#weatherType').html(weatherMain).includes("Clouds")===true){
        
        $('body').css('background-image', "url('****')");
      
      }

Please show me the light and tell me why these aren’t working.

Incase it’s needed, here’s the link to the full thing https://codepen.io/Jobo_v22/pen/vddQEJ?editors=0010 the relevant code is at the bottom.

4

Thankyou very much Randell, it’s help knowing what to do, but its also amazingly helpful to know what not to do and I think you’ve just killed about 3 bad coding habits before they developed :stuck_out_tongue:

The onload= “return backgroundImage()” was just left over from me throwing everything at my code and seeing what stuck :sweat_smile: But crazily enough I didn’t even realize my weatherMain variable was already a string, I thought it was still unchanged from in the JSON bit (sorry, not good with terminology)

The button method you suggested makes an enormous amount of sense to use as well.

Honestly thank you for looking over my code and helping me out, I’ve got the images working now (the issue was me trying to convert to html again as you pointed out) so I’m happy. I look forward to someday being able to help others as you have helped me here :smiley:

1 Like