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

Posted by Dylan Hobbs
Dylan Hobbs
9,279 Points

How to add multiple property values to a property?

I am trying to get better with JavaScript and have made this site. Basically what it does is randomizes html5 videos on click based on category.

What I would like to do now is write out the category names as an array and have it appear in multiple categories instead of just one.

I have added in the array on the first video giving it all three categories, so now it should be loading into all 3 categories but it isn't working.

Here is a codepen http://codepen.io/H0BB5/pen/zxZjgj?editors=101

note: clicking the video will initiate the onclick randomize function.

TL;DR – Trying to add first video into all 3 categories so that when randomize function is called it has a chance to show up in each category

Zachary Green
Zachary Green
16,359 Points

maybe implement category as having an object the each single category can have a true or flase value.

1 Answer

wuworkshop
wuworkshop
3,429 Points

I never liked the fact that Codepen has no console panel as far as I can tell. I copied your code into a JS Bin and modified your updateVideosList function so it can handle that category array you have for the first video. I also added a utility function called is to reliably determine what type an object is. I've added a bunch of comments to explain the code and added references to some useful links. Hopefully it makes sense.

http://jsbin.com/zemaje/1/edit?js,output

Dylan Hobbs
Dylan Hobbs
9,279 Points

You're a hero!!!! Haha, thanks heaps man. I've been scratching my head on this for a while. I will definitely go through what you've done and try and learn as much as possible!

Just one more thing, i'm not sure if you would be able to tell me how I can do this, or if it's an easy thing to do. But I was wondering if I wanted users to be able to link to whatever video is randomized (lets say there is an array of 100 videos). How could I make it so that on every click to randomize - the URL also changes as the new video is pulled in. so in short, someone could type videosite.com/3 and it would go to that specific video that it randomized to?

I created this project just to play around with and ask myself questions. That's another big question i've been stumped on. Would I need to use window.location.hash or a pushstate? Would it have to be server side? There isn't much documentation online that I could find on how you would change the URL location for each specific content without reloading the page.

Anyways, thanks again for the help!

wuworkshop
wuworkshop
3,429 Points

Well, you're definitely on the right track. If you don't want reloading of the page to happen AND you want to cross-browser support, check out:

https://github.com/browserstate/history.js

There's a demo link on that page you can play around with.