Is it possible to make a button on a Webflow page display a random item from a Collection without any page loads using custom Javascript and without exposing sensitive data or API keys to users?

Yes, you can achieve this using custom JavaScript while ensuring no sensitive data or API keys are exposed. Below is how you can do it:

1. Structure the Collection List

• Ensure the Collection List is added to your Webflow page and contains the items you want to randomize.
• Set the Collection List Wrapper to display: none so it doesn't show all items by default.
• Each individual Collection Item should have a class name you can reference in JavaScript (e.g., .collection-item).

2. Add a Button to Trigger Random Display

• Add a Button with a unique class (e.g., .random-button).
• Add an Empty Div where the selected item will appear (e.g., give it an ID like #random-output).

3. Add JavaScript for Random Selection

• Embed the following custom JavaScript in your Webflow page before the closing </body> tag:

  ```js
  document.addEventListener("DOMContentLoaded", function () {
  const items = Array.from(document.querySelectorAll(".collection-item"));
  const button = document.querySelector(".random-button");
  const output = document.querySelector("#random-output");

  button.addEventListener("click", function () {
  if (items.length === 0) return;

  const randomItem = items[Math.floor(Math.random() \* items.length)];  output.innerHTML = "";  output.appendChild(randomItem.cloneNode(true));   output.style.display = "block";  

  });
  });
  ```

4. How This Works

• The script hides all Collection List items on page load.
• When the button is clicked, it randomly selects one item, clones it, and displays it in the #random-output container.
• Because the data is already on the page (but hidden), no API calls or database queries occur.

5. Ensuring Security

• Since this only manipulates client-side content, no Webflow API keys or backend operations are exposed, making it secure.

Summary

You can display a random Webflow CMS item without page loads by hiding the Collection List and using JavaScript to pick and reveal a random item. This approach avoids API usage, keeping it secure and lightweight.