Having trouble changing the background image on my weather app

Having trouble changing the background image on my weather app
0.0 0

#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.


#2

You should not be using onload=“return backgroundImage()” in your header for a couple of reasons.

  1. First of all, the function backgroundImage is not in the global scope. You have it declared inside your $.getJSON callback function. If you look at your console (Ctrl+Shft+J in Chrome), you would see the JavaScript thinks it is not defined.

  2. Since you are using jQuery, the $(document).ready callback function basically accomplishes the same thing as your onload event handler in your html, if you really need to call a function when the page loads, it really should be inside this callback function.

  3. I mentioned where you should make such a call to the backgroundImage function above, but you can not just put it anywhere. In fact, the only place you can call backgroundImage is inside the $.getJSON callback function after you have declared weatherMain, because it uses this variable to decide which background image to use for the page.

Now, once you have figured out where to correctly call backgroundImage, you are going to see a new error in your console, because you are attempting to reference a property call “html” which does not exist in the weatherMain object. In fact, weatherMain itself already contains the text value you are wanting to use the includes function on.


#3

FYI - You currently have two versions of Bootstrap added to your CSS. You should only have one version.

Actually, since the only Bootstrap class you are currently using is applied to the p element with id=“temp”, I would not even use Bootstrap (which will make the page load faster) and change your p element to a button element and use the following CSS to make it look the same as you originally had it.

button {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

button:focus {
  outline: none;
}

#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: