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
Ashton Holgate
6,021 PointsHelp with randomising Flexbox Order value in Javascript
Hi all,
I've written some JavaScript code to populate a number of hotel fields with information and, in that initialisation loop, would like to randomise the order of those hotels. I have used flexbox for this purpose. Here is the code I have written.
for (let i = 0; i < hotel.length; i++) {
hotelName[i].textContent = hotelData[i].name;
hotelCity[i].textContent = hotelData[i].city;
hotelImage[i].style.backgroundImage = hotelData[i].image;
hotelPrice[i].textContent = "FROM: £" + hotelData[i].price;
hotelInfo[i].textContent = "Lorem ipsum";
hotel[i].style.order = Math.random() * 1000;
}
Everything else works: the name, city etc. are populated, but the order of the flexbox items remains the same.
In the console I can manipulate "hotel[i].style.order" and can also use "Math.random() * 1000" to get a number between 1 and 1000. For this reason I can't understand why this isn't working.
I have other code that orders by price ascending or descending, by making hotel[i].style.order = price, so I'm not sure why this isn't working.
Any help showing me what I have not understood would be greatly appreciated!
Thanks!
Ashton Holgate
6,021 PointsHi Andrew,
Thanks so much for the answer. It worked perfectly! For some reason I didn't think that order wouldn't accept a floating point number. Thank you for taking the time to explain what I had misunderstood! :)
Unfortunately I don't believe your comment is seen by Treehouse as an 'answer' so therefore I cannot say you solved it. Or, at least, that is how things look on my computer. Perhaps you could answer the normal way for me to vote it as best answer?
Thanks!
1 Answer
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsHey Ashton,
Sorry I added it as a comment, not an answer. My mistake - how can I understand Math.random but not how an answer on a forum works :-)
Math.random() provides a floating point number between 0 and up to 1 (not including 1) - so 0 to 0.99. If you log the random number to the console you'll see you're not getting an integer. Try:
hotel[i].style.order = Math.floor(Math.random() * 1000) + 1;
Math.floor rounds the floating point number down. This means you could still end up with 0 in the order. So the + 1 at the end means you'll now get a number between 1 and 1000.
Hope this works.
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsAndrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsHey Ashton,
Math.random() provides a floating point number between 0 and up to 1 (not including 1) - so 0 to 0.99. If you log the random number to the console you'll see you're not getting an integer. Try:
hotel[i].style.order = Math.floor(Math.random() * 1000) + 1;Math.floor rounds the floating point number down. This means you could still end up with 0 in the order. So the + 1 at the end means you'll now get a number between 1 and 1000.
Hope this works.