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.

This is the code in this example:

Javascript

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');

This is in the HTML (note you have to add HTML as source code see the </> button in the test editor

<button id="ExampleButton" class="btn btn-primary">Click Me</button>

Linked Web Component

How to find your component. Search for it: When selecting a linked web component, it will list every webpage / component in order of pages and component. The fastest way to find a Web Component: go and find the Copy Anchor on the component wanting to...

Previous: "Image Cards 3.0"

This webpage was built with Mition