Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Javascript with Style CSS issue

Hi guys,

Here's issue that I create background images to loop different images each day in Javascript code below, the CSS styles should be working for ".bgImage". Link stylesheets is already shown under head tags Except only bgImage in CSS file doesn't response anything to Javascript code. What is wrong?

EDIT: Remove HTML/CSS too long

2 Answers

wuworkshop
wuworkshop
3,429 Points

I suspect you're getting null because the JavaScript is executing too soon before all your HTML and stylesheets have been parsed. Also, looking a bit more closely at your code, I came up with an alternative approach that doesn't require the 2 for loops.

var loadBkg = function() {
  var day = new Date().getDay();
  var bgImageEl = document.getElementsByClassName("bgImage");
  console.log(bgImageEl);

  var r = bgImageEl[0];
  r.style.backgroundPosition = '20% 20%';
  r.style.backgroundSize = 'cover';
  r.style.backgroundColor = 'transparent';
  // Sunday
  if (day == 0) {
    r.style.backgroundImage = 'url(http://placehold.it/500x200&text=SUNDAY)';
  }
  // Monday
  else if (day == 1) {
    r.style.backgroundImage = 'url(http://placehold.it/500x200&text=MONDAY)';
  }
  // Tuesday
  else if (day == 2) {
    r.style.backgroundImage = 'url(http://placehold.it/500x200&text=TUESDAY)';
  }
  // Wednesday
  else if (day == 3) {
    r.style.backgroundImage = 'url(http://placehold.it/500x200&text=WEDNESDAY)';
  }

};

window.onload = loadBkg;

References:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Thank you, I am testing it soon.

Will let you know :)

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Finally it is working now after few days struggles. I appreciate your quick response and Mozilla references.

wuworkshop
wuworkshop
3,429 Points

Glad that worked for you. BTW, I was totally wrong about the reason why you were getting that null error message. It had nothing with the timing of the JavaScript execution. The error was due to this line in your original code:

for (j = 0; j < rules.cssRules.length; j++) {

rules.cssRules has a value of null. That's why you were getting that error message. If you use your browser's developer tools it will show which line is causing the error message.

Also, with regards to my alternate approach, I should have written that last line like this:

window.onload = loadBkg;

since you only need to call 1 function. I edited my answer to make the code shorter.

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Okay, I modify it a bit to your suggestion, I do see the value of null has to do with rules.cssRules error message. Seems working well now.

wuworkshop
wuworkshop
3,429 Points
wuworkshop
wuworkshop
3,429 Points

I just did a quick JSBin of your code, and code-wise, it seems to work. I replaced your image paths with placehold.it images to see if the background image actually changed and it did. View it here:

http://jsbin.com/sohasetazu/1/edit?html,console,output

If you open up your browser's developer tools do you see any error messages? Are you sure your image paths are correct in your JavaScript code?

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Forgot to mention, can you please delete JSBin example above if possible, it is now solved. :)

Thanks

wuworkshop
wuworkshop
3,429 Points

Salman Ak , sorry, but that's not possible for me to do at this point since I created the bin anonymously. The only way I could delete a bin anonymously is when I was editing the bin.