Randomising a text box from pre-determined list of texts

Ask the community
,
1

Good Afternoon, I am new to coding and just wondering if someone can help.

I’m currently using Wix Studio Editor, and I’m currently designing a website for personal use.

It’s very simple and will just have a text box and a button. On the press of the button, I want the text box to display a random text that is from a pre-determined database or list.

I’ve tried following some previous guides and topic answers but I either can’t get it to work, or it doesn’t suit what I’m trying to do.

I’m wondering what would the best way to go about this would be.

2

Here’s a solution for displaying a random text from a database in Wix Studio Editor, suitable for someone new to coding:

1. Create a Database Collection:

  • In the Wix Editor, navigate to the “Database” tab on the left sidebar.
  • Click on “Create a New Collection.”
  • Give your collection a name that reflects its purpose, like “RandomTexts.”
  • Add a field to this collection. This field will store the text you want to display randomly. You can name it “Text” or something similar.

2. Populate the Database (Optional):

  • You can manually add entries to the “RandomTexts” collection by clicking on it and then clicking “Add Item.” Enter the text you want to display in the “Text” field and click “Save.”
  • Alternatively, if you have a list of texts prepared, you can import them into the collection using a CSV file.

3. Add Text Box and Button:

  • Go back to your website page design.
  • From the “Elements” panel on the left, drag and drop a “Text Box” element onto your page. This will display the random text later.
  • Next, add a “Button” element. This will trigger the code to display a random text.

4. Add Code to the Button:

  • Click on the button element to select it.
  • In the “Actions” tab on the right, under “Click,” choose “Code.”
  • This will open the code editor window. Here’s the code you’ll need to paste:

import wixData from 'wix-data';

$w.onReady(function () {
  // a random text item on page load (optional)
  RandomItem();
});

$w("#button1").onClick(function () { // Replace "#button1" with your button's ID
  RandomItem();
});

function RandomItem() {
  wixData.query("RandomTexts")
    .find()
    .then((results) => {
      if (results.items.length > 0) {
        const randomIndex = Math.floor(Math.random() * results.items.length);
        const randomItem = results.items[randomIndex];
        $w("#textBox1").text = randomItem.Text; // Replace "#textBox1" with your text box's ID
      } else {
        console.log("No text found in the database");
      }
    })
    .catch((error) => {
      console.error(error);
    });
}

This approach avoids complex coding and relies on Wix’s built-in database functionality, making it suitable for beginners in Wix Studio Editor.

3

Do you have any video format where we can see and do it .

4

Hey there! While we don’t currently have video tutorials, As a Wix Expert, I’m happy to offer my knowledge and expertise to help you achieve your goals.

These live Zoom guidance sessions are typically offered for a fee, but they ensure you get one-on-one attention and tailored solutions.
to get one-on-one guidance and tailored solutions for your specific situation you are welcome to visit our website www.cmsblocks.com

5

Thank you so much, I’ll try this out later today

6

Hello, this is working perfectly so far but i do have another problem.

Out of a database of 100, every time i press the button it displays a random item from that database, but is there any way to then remove that item temporarily so that i cant get it again till i reload the entire page or until i press a “refresh” button?

That way i get a different item every time i press the button and cannot get any duplicates till i reload the page?