// Filename: public/new-file.js
// Code written in public files is shared by your site's
// Backend, page code, and site code environments.
// Use public files to hold utility functions that can
// be called from multiple locations in your site's code.
// export function add(param1, param2) {
// return param1 + param2;
// }
// The following code demonstrates how to call the add
// function from your site's page code or site code.
/*
import {add} from 'public/new-file.js'
$w.onReady(function () {
let sum = add(6,7);
console.log(sum);
});
*/
// Complete implementation for targeting buttons in Wix without IDs
// Add this to your page code in Wix
$w.onReady(function () {
// Log that the code is running
console.log("Button targeting code initialized");
// Function to target buttons by their index
function targetButton(index) {
// Get all elements that could be buttons
// In Wix, we need to be comprehensive about what constitutes a "button"
const allPossibleButtons = $w("Button, #customElement");
console.log("Found possible button elements:", allPossibleButtons.length);
// Filter to only actual button elements if needed
// This step is optional depending on your site structure
const buttons = allPossibleButtons.filter(element => {
// Check if this is an actual button-like element
return element && (
element.type === "Button" ||
element.tagName === "BUTTON" ||
(element.role && element.role === "button")
);
});
console.log("Filtered to actual button elements:", buttons.length);
// Check if the index is valid
if (index < 1 || index > buttons.length) {
console.error(`Button index out of range. Valid range: 1-${buttons.length}`);
return null;
}
// Return the button at the specified index (adjusting for 0-based indexing)
return buttons[index - 1];
}
// Utility functions that work with Wix button properties
function changeButtonText(index, newText) {
const button = targetButton(index);
if (button) {
// Try different properties that might control button text in Wix
if (typeof button.text !== 'undefined') {
button.text = newText;
console.log(`Changed button ${index} text to "${newText}" using .text property`);
} else if (typeof button.label !== 'undefined') {
button.label = newText;
console.log(`Changed button ${index} text to "${newText}" using .label property`);
} else if (typeof button.html !== 'undefined') {
button.html = newText;
console.log(`Changed button ${index} text to "${newText}" using .html property`);
} else if (typeof button.setValue === 'function') {
button.setValue(newText);
console.log(`Changed button ${index} text to "${newText}" using .setValue() method`);
} else {
console.error(`Could not change button ${index} text - no suitable property found`);
console.log("Button properties:", Object.keys(button));
}
}
}
function toggleButtonDisabled(index) {
const button = targetButton(index);
if (button) {
// Try different properties that might control button enabled state
if (typeof button.enabled !== 'undefined') {
button.enabled = !button.enabled;
console.log(`Toggled button ${index} enabled state to ${button.enabled}`);
} else if (typeof button.disable === 'function' && typeof button.enable === 'function') {
if (button.isDisabled) {
button.enable();
console.log(`Enabled button ${index} using .enable() method`);
} else {
button.disable();
console.log(`Disabled button ${index} using .disable() method`);
}
} else {
console.error(`Could not toggle button ${index} enabled state - no suitable property found`);
console.log("Button properties:", Object.keys(button));
}
}
}
// Debug function to inspect button properties
function inspectButton(index) {
const button = targetButton(index);
if (button) {
console.log(`Button ${index} properties:`, Object.keys(button));
console.log(`Button ${index} type:`, typeof button);
console.log(`Button ${index} toString:`, button.toString());
// Try to log common properties
const commonProps = ['id', 'type', 'label', 'text', 'value', 'enabled'];
commonProps.forEach(prop => {
console.log(`Button ${index} ${prop}:`, button[prop]);
});
// Try to access common methods
const commonMethods = ['getValue', 'setValue', 'disable', 'enable'];
commonMethods.forEach(method => {
console.log(`Button ${index} has ${method}:`, typeof button[method] === 'function');
});
return button;
}
return null;
}
// Test code - run when the page loads
try {
// Log all available elements to see what we're working with
console.log("All page elements:", $w("*").length);
// Try different selectors to find buttons
const wixButtons = $w("Button");
console.log("Elements with Button selector:", wixButtons.length);
// List all element types on the page for debugging
const elementTypes = new Set();
$w("*").forEach(el => {
if (el && el.type) {
elementTypes.add(el.type);
}
});
console.log("Element types on page:", Array.from(elementTypes));
// If we found any buttons, inspect the first one
if (wixButtons.length > 0) {
console.log("First button found:", wixButtons[0]);
inspectButton(1);
} else {
console.warn("No buttons found with the standard selector");
}
// Try changing the text of the first button if it exists
if (wixButtons.length > 0) {
changeButtonText(1, "Test Button");
}
} catch (error) {
console.error("Error during button testing:", error);
}
// Make functions available globally for testing in console
window.targetButton = targetButton;
window.changeButtonText = changeButtonText;
window.toggleButtonDisabled = toggleButtonDisabled;
window.inspectButton = inspectButton;
console.log("Button targeting code initialized and ready for testing");
});
