Properties for text element

robin_arora · June 12, 2025, 1:03pm

I can’t seem to find where I can fix the IDs for the text elemement. I am trying to do as below. Can someone help me with this please

These warnings mean that the JavaScript code is running, but it can’t find the specific text elements on your Wix Studio page that it’s supposed to update.

To fix this, you need to go into your Wix Studio editor and ensure you have two separate text elements on your page, and that their IDs are set correctly:

Add two ‘Text’ elements:

From the “Add Elements” panel in Wix Studio, drag and drop a Text element onto your Contact Us page. This will be for the full list of hours.
Drag and drop a second Text element onto the page. This will be for the “currently open/closed” status.

Set the IDs of these Text elements:

For the full hours list: Select the first Text element you added. In its “Properties” panel (usually on the right side of the Wix Studio editor), look for the “Developer Tools” or “Advanced” section. Find the “ID” field and change it to hoursTextDisplay.
For the open/closed status: Select the second Text element. In its “Properties” panel, change its “ID” field to openClosedStatus.

Once you’ve added these two text elements and correctly set their IDs, save and publish your Wix Studio site. The Velo code should then be able to find and update these elements, and the warnings in your console will disappear.

noahlovell · June 12, 2025, 1:05pm

The ID for elements can be found here:

If you need any help with the code, let us know

robin_arora · June 12, 2025, 1:22pm

Thanks. I think i still need some help. This is what I am trying to paste. Maybe I am doing something wrong.

// Velo JavaScript for Wix Studio
// Place this code in the page's Velo editor (usually found in the Page Properties panel on the right, under 'Code')

$w.onReady(function () {
    // Call the function to display and manage operating hours when the page is ready
    displayOperatingHours();
});

/**
 * Dynamically displays operating hours, highlights the current day,
 * and shows the current open/closed status.
 *
 * To use this code:
 * 1.  Add two 'Text' elements to your Wix Studio page where you want the hours and status to appear.
 * 2.  Select the first Text element, go to its 'Properties' panel (usually on the right),
 * and in the 'Developer Tools' or 'Advanced' section, change its ID to: 'hoursTextDisplay'.
 * This element will show your full list of hours.
 * 3.  Select the second Text element, and change its ID to: 'openClosedStatus'.
 * This element will show if your business is currently open or closed.
 */
function displayOperatingHours() {
    // --- IMPORTANT: DEFINE YOUR BUSINESS'S REGULAR OPERATING HOURS HERE ---
    // Ensure times are in 12-hour format with AM/PM (e.g., "9:00 AM – 5:00 PM").
    // Use "Closed" for days you are not open.
    const operatingHours = [
        { day: "Sunday", hours: "Closed" },
        { day: "Monday", hours: "9:00 AM – 5:00 PM" },
        { day: "Tuesday", hours: "9:00 AM – 5:00 PM" },
        { day: "Wednesday", hours: "9:00 AM – 5:00 PM" },
        { day: "Thursday", hours: "9:00 AM – 5:00 PM" },
        { day: "Friday", hours: "9:00 AM – 6:00 PM" },
        { day: "Saturday", hours: "10:00 AM – 2:00 PM" }
    ];

    // Array of day names corresponding to JavaScript's getDay() method (0=Sunday, 6=Saturday)
    const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    const today = new Date();
    const currentDayIndex = today.getDay(); // Gets the current day of the week (0-6)
    const currentDayHours = operatingHours[currentDayIndex].hours; // Hours for today

    // --- Generate HTML for the full list of hours, highlighting today's hours ---
    let hoursHtmlContent = "";
    operatingHours.forEach((item, index) => {
        let line = `${item.day}: ${item.hours}`;
        // If it's the current day, apply bold styling and a blue color (you can change #0070c0)
        if (index === currentDayIndex) {
            line = `<span style="font-weight: bold; color: #0070c0;">${line} (Today)</span>`;
        }
        hoursHtmlContent += line + "<br>"; // Add a line break for each day
    });

    // Update the Text element designated for displaying all hours
    if ($w("#hoursTextDisplay").length > 0) {
        $w("#hoursTextDisplay").html = hoursHtmlContent;
    } else {
        // Log a warning if the element isn't found, so you know what to check
        console.warn("Velo Warning: Text element with ID '#hoursTextDisplay' not found. Please add a text element and set its ID to 'hoursTextDisplay' in Wix Studio to display full hours.");
    }

    // --- Determine and display the current open/closed status ---
    let statusMessage = "";
    // Calculate current time in minutes from midnight for easy comparison
    const nowInMinutes = today.getHours() * 60 + today.getMinutes();

    // Check if the business is scheduled to be closed today
    if (currentDayHours.toLowerCase() === "closed") {
        statusMessage = "We are currently closed today.";
    } else {
        // Helper function to parse time strings (e.g., "9:00 AM") into minutes from midnight
        const parseTimeInMinutes = (timeStr) => {
            const [time, ampm] = timeStr.split(' ');
            let [hours, minutes] = time.split(':').map(Number);
            // Adjust hours for PM times and 12 AM/PM
            if (ampm && ampm.toLowerCase() === 'pm' && hours !== 12) hours += 12;
            if (ampm && ampm.toLowerCase() === 'am' && hours === 12) hours = 0; // Handle 12 AM (midnight)
            return hours * 60 + minutes;
        };

        // Split the hours string (e.g., "9:00 AM – 5:00 PM") into open and close times
        const [openTimeStr, closeTimeStr] = currentDayHours.split(' – ');
        const openTimeInMinutes = parseTimeInMinutes(openTimeStr);
        const closeTimeInMinutes = parseTimeInMinutes(closeTimeStr);

        // Check if the current time falls within the open hours
        if (nowInMinutes >= openTimeInMinutes && nowInMinutes <= closeTimeInMinutes) {
            statusMessage = "We are currently open!";
        } else {
            statusMessage = "We are currently closed.";
        }
    }

    // Update the Text element designated for displaying the open/closed status
    if ($w("#openClosedStatus").length > 0) {
        $w("#openClosedStatus").text = statusMessage;
    } else {
        // Log a warning if the element isn't found
        console.warn("Velo Warning: Text element with ID '#openClosedStatus' not found. Please add a text element and set its ID to 'openClosedStatus' in Wix Studio to display open/closed status.");
    }
}

noahlovell · June 12, 2025, 1:40pm

You’re likely getting a red line for these two:

if ($w("#hoursTextDisplay").length > 0) {

if ($w("#openClosedStatus").length > 0) {

The reason for this, is text components don’t have a “length” property. You should be good to take them out of the if/else.

I also made a change so that when you set the hoursTextDisplay it retains the styling you make in the editor, and only highlights the day with the same logic you had. For example:

Final code:

// Velo JavaScript for Wix Studio
// Place this code in the page's Velo editor (usually found in the Page Properties panel on the right, under 'Code')

$w.onReady(function () {
    displayOperatingHours();
});

/**
 * Dynamically displays operating hours, highlights the current day,
 * and shows the current open/closed status.
 *
 * To use this code:
 * 1.  Add two 'Text' elements to your Wix Studio page where you want the hours and status to appear.
 * 2.  Set the ID of the text element displaying hours to: 'hoursTextDisplay'
 *     and include `{hours}` somewhere in its HTML where the schedule should go.
 * 3.  Set the ID of the text element displaying open/closed status to: 'openClosedStatus'
 */
function displayOperatingHours() {
    const operatingHours = [
        { day: "Sunday", hours: "Closed" },
        { day: "Monday", hours: "9:00 AM – 5:00 PM" },
        { day: "Tuesday", hours: "9:00 AM – 5:00 PM" },
        { day: "Wednesday", hours: "9:00 AM – 5:00 PM" },
        { day: "Thursday", hours: "9:00 AM – 5:00 PM" },
        { day: "Friday", hours: "9:00 AM – 6:00 PM" },
        { day: "Saturday", hours: "10:00 AM – 2:00 PM" }
    ];

    const today = new Date();
    const currentDayIndex = today.getDay();
    const currentDayHours = operatingHours[currentDayIndex].hours;

    let hoursHtmlContent = "";
    operatingHours.forEach((item, index) => {
        let line = `${item.day}: ${item.hours}`;
        if (index === currentDayIndex) {
            line = `<span style="font-weight: bold; color: #0070c0;">${line} (Today)</span>`;
        }
        hoursHtmlContent += line + "<br>";
    });

    // Replace {hours} in the original HTML instead of overwriting it
    const originalHtml = $w("#hoursTextDisplay").html;
    $w("#hoursTextDisplay").html = originalHtml.replace("{hours}", hoursHtmlContent);

    // Determine and display the current open/closed status
    let statusMessage = "";
    const nowInMinutes = today.getHours() * 60 + today.getMinutes();

    if (currentDayHours.toLowerCase() === "closed") {
        statusMessage = "We are currently closed today.";
    } else {
        const parseTimeInMinutes = (timeStr) => {
            const [time, ampm] = timeStr.split(' ');
            let [hours, minutes] = time.split(':').map(Number);
            if (ampm && ampm.toLowerCase() === 'pm' && hours !== 12) hours += 12;
            if (ampm && ampm.toLowerCase() === 'am' && hours === 12) hours = 0;
            return hours * 60 + minutes;
        };

        const [openTimeStr, closeTimeStr] = currentDayHours.split(' – ');
        const openTimeInMinutes = parseTimeInMinutes(openTimeStr);
        const closeTimeInMinutes = parseTimeInMinutes(closeTimeStr);

        if (nowInMinutes >= openTimeInMinutes && nowInMinutes <= closeTimeInMinutes) {
            statusMessage = "We are currently open!";
        } else {
            statusMessage = "We are currently closed.";
        }
    }

    $w("#openClosedStatus").text = statusMessage;
}

robin_arora · June 12, 2025, 2:49pm

Thank you so much. Need help with one last question (hopefully). I added a open in maps button but nothing is happening when i click on it. Thanks in advance!

$w.onReady(function () {
// Set “Get in Touch” text (optional via code, can be static too)
try {
$w(“#getInTouchLabel”).text = “Get in Touch”;
} catch (err) {
console.warn(“Text element ‘#getInTouchLabel’ not found.”);
}

displayOperatingHours();
setupDirectionsButton();

});

function displayOperatingHours() {
const operatingHours = [
{ day: “Sunday”, hours: “Closed” },
{ day: “Monday”, hours: “9:00 AM – 5:00 PM” },
{ day: “Tuesday”, hours: “9:00 AM – 5:00 PM” },
{ day: “Wednesday”, hours: “9:00 AM – 5:00 PM” },
{ day: “Thursday”, hours: “9:00 AM – 5:00 PM” },
{ day: “Friday”, hours: “9:00 AM – 6:00 PM” },
{ day: “Saturday”, hours: “10:00 AM – 2:00 PM” }
];

const today = new Date();
const currentDayIndex = today.getDay();
const currentDayHours = operatingHours[currentDayIndex].hours;

let hoursHtmlContent = "";
operatingHours.forEach((item, index) => {
    let line = `<span style="font-size: 16px;">${item.day}: ${item.hours}</span>`;
    if (index === currentDayIndex) {
        line = `<span style="font-weight: bold; color: #0070c0; font-size: 16px;">${item.day}: ${item.hours} (Today)</span>`;
    }
    hoursHtmlContent += line + "<br>";
});

try {
    $w("#hoursTextDisplay").html = hoursHtmlContent;
} catch (err) {
    console.warn("Text element '#hoursTextDisplay' not found.");
}

let statusMessage = "";
const nowInMinutes = today.getHours() * 60 + today.getMinutes();

if (currentDayHours.toLowerCase() === "closed") {
    statusMessage = "We are currently closed today.";
} else {
    const parseTimeInMinutes = (timeStr) => {
        const [time, ampm] = timeStr.split(' ');
        let [hours, minutes] = time.split(':').map(Number);
        if (ampm.toLowerCase() === 'pm' && hours !== 12) hours += 12;
        if (ampm.toLowerCase() === 'am' && hours === 12) hours = 0;
        return hours * 60 + minutes;
    };

    const [openTimeStr, closeTimeStr] = currentDayHours.split(' – ');
    const openTimeInMinutes = parseTimeInMinutes(openTimeStr);
    const closeTimeInMinutes = parseTimeInMinutes(closeTimeStr);

    statusMessage = (nowInMinutes >= openTimeInMinutes && nowInMinutes <= closeTimeInMinutes)
        ? "We are currently open!"
        : "We are currently closed.";
}

try {
    $w("#openClosedStatus").text = statusMessage;
} catch (err) {
    console.warn("Text element '#openClosedStatus' not found.");
}

}

function setupDirectionsButton() {
const address = “2828 1st Ave, Suite 204, Huntington, WV 25702”;
const encodedAddress = encodeURIComponent(address);
const googleMapsUrl = https://www.google.com/maps?daddr=${encodedAddress};
const appleMapsUrl = https://maps.apple.com/?daddr=${encodedAddress};

const userAgent = navigator.userAgent || navigator.vendor || window.opera;
const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
const mapsUrl = isIOS ? appleMapsUrl : googleMapsUrl;

try {
    $w("#directionsButton").onClick(() => {
        const opened = window.open(mapsUrl, "_blank");
        if (!opened) {
            console.error("Popup blocker prevented maps from opening.");
            alert("Please allow popups to open directions in a new tab.");
        }
    });
} catch (err) {
    console.warn("Button '#directionsButton' not found.");
}

}

robin_arora · June 12, 2025, 4:13pm

I think i was able to get that fixed. Thanks!

Topic		Replies	Views
[Implemented] Possibility to change an element id Ask the community code	6	1370	December 26, 2023
Velo API Reference Bug Fixes (Feb 2021) Be in the know code , wix-stores , wix-bookings , wix-members-area , news	7	204	February 10, 2021
How to edit label text in Wix Code? Ask the community code , question	8	5169	March 16, 2019
ID of items within an element Ask the community code , question	1	199	December 21, 2021
Changing text/line/element color? Ask the community code , question	1	2616	October 11, 2017

Properties for text element

Related topics