Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Ashton Holgate
Ashton Holgate
6,021 Points

Help 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!

Andrew Murphy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

Hey 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.

Ashton Holgate
Ashton Holgate
6,021 Points

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

Hey 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.