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
David Albers
8,807 PointsRandom Background Image with JavaScript.
Hey Everyone!
I am trying to write a JavaScript that will randomly change the background image on load. I am probably just missing something simple at this point, but I have been looking at the code for a while and cant get it.
I would appreciate any help you all can give me. I am enclosing a link to my workspace below.
Thanks David
6 Answers
Trevor Johnson
14,427 PointsHey David, I am gonna try and do this real quick, and then i'll get back to you with how I solved. My initial guess is to use some jQuery that runs once the page is loaded. Use the same randNum function that you have as well as an array of potential hex values/images to use to update the background image. Then use some more jQuery that will take that value from the random position of the array and update the css.
Trevor Johnson
14,427 PointsOk David, I made a codepen site for you to take a look. Let me know if you have questions or if you are unfamiliar with jQuery. It's just a few simple lines of it that you will probably understand if you need me to explain it. By the way, I also did this challenge that you are doing on freeCodeCamp.
David Albers
8,807 PointsHey Trevor
I really appreciate your help. I will take a look at it tomorrow. I thought I could due this just with vanilla Javascript. I have not gotten to jquery yet in my path, but I will see if I can figure out what you have and get back with any questions. Again, thanks for your help!
David
Trevor Johnson
14,427 PointsAwesome! I updated it to remove the jQuery and use the DOM so that you are more familiar with it. I think this will help out.
David Albers
8,807 PointsHey Trevor
That js is doing random colors. I was hoping to tackle putting random images into the background of a container
David
Trevor Johnson
14,427 PointsYeah I did it like that to get it done quick. It should be the same concept though. I'll try it out
Trevor Johnson
14,427 PointsCheck out these two stack overflow articles. This should be what you are looking for with changing the background image. The link I gave you will show you this as well.
https://stackoverflow.com/questions/14602482/random-image-background-in-div https://stackoverflow.com/questions/19369426/random-background-image-on-refresh
Jason Anello
Courses Plus Student 94,610 PointsHi David,
You were pretty close with the code that you have.
There's just one small error in the following code:
document.body.style.backgroundImage= 'url(randSelect)';
In this case, you have your randSelect variable as part of a literal string. It doesn't get interpreted as a variable. You're literally setting the background image to that string.
Instead you need to concatenate the value of the randSelect variable along with the required url() syntax.
Try the following instead,
document.body.style.backgroundImage= 'url(' + randSelect + ')';
In this case, randSelect is not within quotes and it will actually be interpreted as a variable.