---
title: "JavaScript - Tassos Code Snippets"
description: "JavaScript snippets are designed for writing and running custom client-side code that enhances your site's behaviour and interactivity. Common applica"
url: "https://www.tassos.gr/docs/code-snippets/types/javascript"
date: "2026-04-29T06:29:07+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Tassos Code Snippets ](https://www.tassos.gr/index.php?option=com_content&view=category&id=120) / [ Snippet Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=122)

#  JavaScript

JavaScript snippets are designed for writing and running custom client-side code that enhances your site's behaviour and interactivity. Common applications include setting up analytics and event tracking, implementing cookie consent logic, adding custom form validation, building interactive UI elements, or running any JavaScript that needs to execute on page load. If you're writing the code yourself rather than loading it from an external source, this is your type.

## [How to Create a JavaScript Snippet](#how-to-create-a-javascript-snippet)

To learn how to add custom JavaScript in Joomla, follow the steps below:

1. Log in to your Joomla administrator
2. Go to **Components → Tassos Code Snippets**
3. Click **New**
4. Enter a descriptive **Title** (e.g. "Cookie Disclaimer")
5. Select **Text** as the Code Type.
6. Choose one of the following insertion locations
    - Site Header
    - Site Footer
    - Admin Header
    - Admin Footer
7. Write or paste your JavaScript into the code editor without including `<script>` tags. Your code is automatically wrapped in a `<script>` tag when injected at the chosen location.
8. Open the **Conditional Logic** tab to restrict which pages or users the snippet runs on. Leave it empty to run it site-wide. Learn more in [Using Snippet Logic](https://www.tassos.gr/docs/tassos-code-snippets/functionality/conditional-logic).
9. Set Status to Published and click Save &amp; Close.

## [Best Practices](#best-practices)

### [Wait for DOM Ready](#wait-for-dom-ready)

Always wait for the DOM to load before manipulating elements:

 ```
document.addEventListener('DOMContentLoaded', function() {
    // Your code here
});

```

## [Troubleshooting](#troubleshooting)

### [Script Not Executing](#script-not-executing)

1. Check browser console for errors (F12 → Console)
2. Verify snippet is Published
3. Ensure location is appropriate (Footer for DOM manipulation)
4. Check conditional logic settings
5. Verify no JavaScript conflicts with other scripts

### [Console Errors](#console-errors)

- Check for syntax errors in your code
- Verify external dependencies are loaded
- Ensure selectors match actual elements on the page
- Check for conflicts with other scripts

### [Timing Issues](#timing-issues)

- Use `DOMContentLoaded` or place scripts in Footer
- For external dependencies, ensure they load first
- Use `defer` or `async` attributes when loading external scripts

 Last updated on Mar 3rd 2026 14:03

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Tassos Code Snippets",
            "item": "https://www.tassos.gr/docs/code-snippets"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Snippet Types",
            "item": "https://www.tassos.gr/docs/code-snippets/types"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "JavaScript",
            "item": "https://www.tassos.gr/docs/code-snippets/types/javascript"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/code-snippets/types/javascript"
    },
    "headline": "JavaScript",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/code-snippets/types/javascript"
    },
    "datePublished": "2026-03-02T18:19:34+02:00",
    "dateCreated": "2026-03-02T18:19:34+02:00",
    "dateModified": "2026-03-03T14:52:41+02:00"
}
```