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! While you're at it, check out some resources Treehouse students have shared here.

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

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

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

Thank you, I am testing it soon.

Will let you know :)

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

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.

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.

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?

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

Thanks

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.