Back to all components

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.

You must include something in the javascript code at a minimum, even just:
console.log('go!');

Key Features
  1. Custom Interactivity: Add behaviours like pop-ups.
  2. Event Handling: Respond to user actions (e.g., clicks, scrolls, or keypresses).
  3. Third-Party Integrations: Embed external tools or widgets, like chatbots or analytics.


 Examples
  1. Interactive Forms: Validate user input in real time or provide instant feedback as users fill out forms.
  2. 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>

Next

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 compon...

Read More