Back to all resources
dynamic content loading
randomization

Random Content

By Jared Malan
This JavaScript snippet dynamically loads content into a webpage based on a random number generation. The script is designed to load different HTML content files into a specific element on the page, identified by the class .chat-col_content. The content files are named content-2.html, content-3.html, and content-4.html.

How it works:

  1. Random Number Generation: The script generates a random number between 1 and 4. This is achieved by using Math.random() to get a random float between 0 (inclusive) and 1 (exclusive), multiplying the result by randomMax (which is 4), and then using Math.floor() to round down to the nearest whole number. Finally, 1 is added to ensure the range is from 1 to 4.

  2. Conditional Content Loading: If the generated random number is greater than 1, the script proceeds to load content. This condition effectively excludes content-1.html from being loaded, and only considers content-2.html, content-3.html, and content-4.html.

  3. Content Loading: The jQuery .load() method is used to fetch and insert content. It targets the first element with the class .chat-col_content and loads the HTML content from the respective content-X.html file (where X is the random number generated). It specifically fetches the content within the #content-el element of the loaded file.

  4. Callback Function: After the content is successfully loaded, a callback function is executed, logging "Content loaded" to the console. This function can be expanded to include additional actions to be performed after the content is loaded.

This approach allows for a simple way to introduce variability into the content presented to the user, making the user experience more dynamic and less predictable.