Lunds Naturskyddsförening

⚠️ Huvudproblem vi stötte på:

• Funktioner inte definierade globalt - onclick-attribut kräver globala funktioner
• Komplicerad JavaScript-struktur - för många objekt och avancerade funktioner
• Syntax-fel som bröt hela scriptet - en fel parenthes förstör allt
• Cache-problem - gamla versioner av JavaScript-koden laddades

1. Enkla globala funktioner

Använd function funktionsnamn() direkt i global scope, inte som objekt-metoder:

// ✅ RÄTT - Global funktion
function copyText(elementId) {
    var element = document.getElementById(elementId);
    var text = element.textContent;
    navigator.clipboard.writeText(text);
}

// ❌ FEL - Objektmetod (fungerar inte med onclick)
const myObject = {
    copyText: function() { ... }
};

2. Robust felhantering

Alltid kontrollera att element finns och hantera fel:

function copyText(elementId) {
    try {
        var element = document.getElementById(elementId);
        if (!element) {
            alert('Fel: kunde inte hitta element');
            return;
        }
        
        var text = element.textContent;
        if (navigator.clipboard) {
            navigator.clipboard.writeText(text).then(function() {
                alert('Text kopierad!');
            }).catch(function() {
                alert('Kunde inte kopiera automatiskt');
            });
        } else {
            alert('Clipboard stöds inte');
        }
    } catch (error) {
        alert('Ett fel uppstod: ' + error.message);
    }
}

3. ICS-filnedladdning

Använd Blob och URL.createObjectURL för att ladda ner filer:

function downloadICS() {
    try {
        var icsContent = 'BEGIN:VCALENDAR\\r\\n';
        icsContent += 'VERSION:2.0\\r\\n';
        // ... lägg till ICS-innehåll
        icsContent += 'END:VCALENDAR\\r\\n';
        
        var blob = new Blob([icsContent], { type: 'text/calendar' });
        var link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
        link.download = 'calendar.ics';
        
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        
        alert('Fil nedladdad!');
    } catch (error) {
        alert('Fel vid nedladdning: ' + error.message);
    }
}

Cache-hantering

• Lägg till cache-busting headers: <meta http-equiv="Cache-Control" content="no-cache">
• Ändra title eller lägg till versionsnummer vid uppdateringar
• Använd Ctrl+Shift+R för hård refresh under utveckling
• Testa alltid i inkognito-läge för att undvika cache

Debug-strategier

• Använd console.log() för att logga när funktioner anropas
• Kontrollera att funktioner är definierade: console.log('funktionsnamn:', typeof funktionsnamn);
• Testa funktioner direkt i konsolen: funktionsnamn()
• Kolla för syntax-fel som förhindrar att script körs

HTML-knappar

• Använd onclick="funktionsnamn()" direkt i HTML
• Undvik addEventListener för enkla knappar
• Ge element tydliga ID:n: id="googleIcsUrl"
• Testa att ID:n är unika och stavade rätt

• Definiera funktioner inuti objekt eller andra funktioner
• Använda arrow functions för onclick-händelser
• Glömma felhantering för clipboard-operationer
• Inte testa att element finns innan man använder dem
• Komplicera koden med onödiga abstraktioner
• Inte hantera skillnader mellan webbläsare (särskilt clipboard)

1. KISS-principen: Keep It Simple, Stupid - enkla globala funktioner
2. Testa tidigt: Verifiera att funktioner är definierade innan du bygger vidare
3. Robust felhantering: Alltid try/catch och kontrollera att element finns
4. Cache-medvetenhet: Använd cache-busting under utveckling
5. Konsol-debug: Logga allt för att förstå vad som händer