Browse Source

Minimal fix: Add null checks to critical event listeners

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>
master
HikeMap User 1 month ago
parent
commit
57ce966370
  1. 134
      index.html

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

Loading…
Cancel
Save