JavaScript
The JavaScript element in Mition allows you to add custom scripts to enhance the functionality and interactivity of your website.
This element is ideal for embedding dynamic features that go beyond standard HTML and CSS.
There is a section for javascript and a HTML section where you can add <script> and <style> tags for your own html for that page.
If you want this script to run on everypage, use this control on the homepage and add the class "wholesite" which will add it automatically to every webpage, we use this for additional footer controls.
WARNING: the script might run before the HTML elements are present, so to ensure the elements are there when the script runs, we suggest to create a function that checks for the id or classname of the HTML component before running, see the sample javascript below. For simple <script and <style tags these will load when the site loads as usual.
Key Features
- Custom Interactivity: Add behaviours like pop-ups.
- Event Handling: Respond to user actions (e.g., clicks, scrolls, or keypresses).
- Third-Party Integrations: Embed external tools or widgets, like chatbots or analytics.
Examples
- Interactive Forms: Validate user input in real time or provide instant feedback as users fill out forms.
- Dynamic Content: Use JavaScript to load content dynamically without reloading the page, like filtering products on an e-commerce site.
You can get AI to help you write functions too.
write a sample javascript function that keeps looking for an id of an element and adds a listener to it that says alert('clicked'), wait 1 second before retrying, console.log('not found: ' + count) each time it is not found and if count reaches > 10 abort.
function waitForElementAndAddClickListener(elementId, maxRetries = 10) {
let retries = 0;
function checkForElement() {
const targetElement = document.getElementById(elementId);
if (targetElement) {
// Element found! Add a click event listener.
targetElement.addEventListener('click', () => {
alert('Clicked!');
});
} else {
// Element not found.
retries++;
console.log(`Element with ID "${elementId}" not found. Retries: ${retries}`);
if (retries >= maxRetries) {
console.log(`Aborting after ${maxRetries} retries.`);
return;
}
// Retry after 1 second.
setTimeout(checkForElement, 1000);
}
}
// Start checking for the element.
checkForElement();
}
// Usage example:
waitForElementAndAddClickListener('ExampleButton');