From 57ce9663701abeae1c94b4e2fcec8c3640daf66f Mon Sep 17 00:00:00 2001
From: HikeMap User <melancholytron@gmail.com>
Date: Thu, 1 Jan 2026 10:19:03 -0600
Subject: [PATCH] Minimal fix: Add null checks to critical event listeners
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Simple fix to prevent JavaScript from breaking when elements don't exist:
- Wrapped geocache event listeners in setupGeocacheListeners() function
- Added null checks for panelToggle (hamburger menu)
- Added null checks for clearNavBtn, undoBtn, mergeConnectBtn, etc.
- Added debug logging for hamburger click

This prevents errors from stopping script execution.
The hamburger menu should work now if the element exists.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 index.html | 134 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 94 insertions(+), 40 deletions(-)

diff --git a/index.html b/index.html
index 37c7014..2edeee4 100644
--- a/index.html
+++ b/index.html
@@ -3049,29 +3049,60 @@
             }, 3000);
         }
 
-        // Setup geocache dialog handlers
-        document.getElementById('geocacheCancel').addEventListener('click', hideGeocacheDialog);
-        document.getElementById('geocacheSubmit').addEventListener('click', addGeocacheMessage);
-        document.getElementById('geocacheDelete').addEventListener('click', deleteGeocache);
-        document.getElementById('geocacheEdit').addEventListener('click', startEditingGeocache);
-
-        // Color picker events
-        document.getElementById('geocacheIconInput').addEventListener('input', updateColorPreview);
-        document.getElementById('geocacheColorInput').addEventListener('input', updateColorPreview);
-        document.getElementById('geocacheColorReset').addEventListener('click', () => {
-            document.getElementById('geocacheColorInput').value = '#FFA726';
-            updateColorPreview();
-        });
+        // Setup geocache dialog handlers - wrapped to prevent errors
+        function setupGeocacheListeners() {
+            try {
+                const geocacheCancel = document.getElementById('geocacheCancel');
+                if (geocacheCancel) geocacheCancel.addEventListener('click', hideGeocacheDialog);
 
-        // Geocache list sidebar events
-        document.getElementById('geocacheListToggle').addEventListener('click', () => {
-            document.getElementById('geocacheListSidebar').classList.toggle('open');
-            updateGeocacheList();
-        });
-        document.getElementById('geocacheListClose').addEventListener('click', () => {
-            document.getElementById('geocacheListSidebar').classList.remove('open');
-        });
-        document.getElementById('geocacheAlert').addEventListener('click', function() {
+                const geocacheSubmit = document.getElementById('geocacheSubmit');
+                if (geocacheSubmit) geocacheSubmit.addEventListener('click', addGeocacheMessage);
+
+                const geocacheDelete = document.getElementById('geocacheDelete');
+                if (geocacheDelete) geocacheDelete.addEventListener('click', deleteGeocache);
+
+                const geocacheEdit = document.getElementById('geocacheEdit');
+                if (geocacheEdit) geocacheEdit.addEventListener('click', startEditingGeocache);
+
+                // Color picker events
+                const iconInput = document.getElementById('geocacheIconInput');
+                if (iconInput) iconInput.addEventListener('input', updateColorPreview);
+
+                const colorInput = document.getElementById('geocacheColorInput');
+                if (colorInput) colorInput.addEventListener('input', updateColorPreview);
+
+                const colorReset = document.getElementById('geocacheColorReset');
+                if (colorReset) {
+                    colorReset.addEventListener('click', () => {
+                        const input = document.getElementById('geocacheColorInput');
+                        if (input) input.value = '#FFA726';
+                        updateColorPreview();
+                    });
+                }
+
+                // Geocache list sidebar events
+                const listToggle = document.getElementById('geocacheListToggle');
+                if (listToggle) {
+                    listToggle.addEventListener('click', () => {
+                        const sidebar = document.getElementById('geocacheListSidebar');
+                        if (sidebar) {
+                            sidebar.classList.toggle('open');
+                            updateGeocacheList();
+                        }
+                    });
+                }
+
+                const listClose = document.getElementById('geocacheListClose');
+                if (listClose) {
+                    listClose.addEventListener('click', () => {
+                        const sidebar = document.getElementById('geocacheListSidebar');
+                        if (sidebar) sidebar.classList.remove('open');
+                    });
+                }
+
+                const geocacheAlert = document.getElementById('geocacheAlert');
+                if (geocacheAlert) {
+                    geocacheAlert.addEventListener('click', function() {
             // Find nearest geocache and open it
             if (userLocation) {
                 let nearestCache = null;
@@ -3090,7 +3121,15 @@
                     showGeocacheDialog(nearestCache);
                 }
             }
-        });
+                    });
+                }
+            } catch (err) {
+                console.warn('Geocache listeners setup error:', err);
+            }
+        }
+
+        // Call it after a short delay to ensure DOM is ready
+        setTimeout(setupGeocacheListeners, 100);
 
         // WebSocket multi-user tracking
         function connectWebSocket() {
@@ -6003,27 +6042,42 @@
         });
 
         // Navigation
-        document.getElementById('clearNavBtn').addEventListener('click', clearDestination);
+        const clearNavBtn = document.getElementById('clearNavBtn');
+        if (clearNavBtn) clearNavBtn.addEventListener('click', clearDestination);
+
+        // Panel toggle - wrap to prevent error if element doesn't exist
+        const panelToggle = document.getElementById('panelToggle');
+        if (panelToggle) {
+            panelToggle.addEventListener('click', function() {
+                console.log('Hamburger clicked!'); // Debug
+                const panel = document.getElementById('controlPanel');
+                const toggleBtn = document.getElementById('panelToggle');
+
+                if (panel && toggleBtn) {
+                    if (panel.style.display === 'none') {
+                        panel.style.display = 'block';
+                        toggleBtn.style.right = '300px';
+                    } else {
+                        panel.style.display = 'none';
+                        toggleBtn.style.right = '10px';
+                    }
+                }
+            });
+        } else {
+            console.error('panelToggle element not found!');
+        }
 
-        // Panel toggle
-        document.getElementById('panelToggle').addEventListener('click', function() {
-            const panel = document.getElementById('controlPanel');
-            const toggleBtn = document.getElementById('panelToggle');
+        const undoBtn = document.getElementById('undoBtn');
+        if (undoBtn) undoBtn.addEventListener('click', undo);
 
-            if (panel.style.display === 'none') {
-                panel.style.display = 'block';
-                toggleBtn.style.right = '300px';
-            } else {
-                panel.style.display = 'none';
-                toggleBtn.style.right = '10px';
-            }
-        });
+        const mergeConnectBtn = document.getElementById('mergeConnectBtn');
+        if (mergeConnectBtn) mergeConnectBtn.addEventListener('click', mergeConnect);
 
-        document.getElementById('undoBtn').addEventListener('click', undo);
+        const selectAllBtn = document.getElementById('selectAllBtn');
+        if (selectAllBtn) selectAllBtn.addEventListener('click', selectAll);
 
-        document.getElementById('mergeConnectBtn').addEventListener('click', mergeConnect);
-        document.getElementById('selectAllBtn').addEventListener('click', selectAll);
-        document.getElementById('clearSelectionBtn').addEventListener('click', clearSelection);
+        const clearSelectionBtn = document.getElementById('clearSelectionBtn');
+        if (clearSelectionBtn) clearSelectionBtn.addEventListener('click', clearSelection);
 
         // Remesh button and dialog
         const remeshSlider = document.getElementById('remeshSpacing');