Update main.js

main.js

@@ -25,22 +25,42 @@ document.addEventListener('DOMContentLoaded', () => {
     console.log('The settings button element is:', settingsBtn); // <-- ADD THIS LINE
     const settingsModal = document.getElementById('settingsModal');
     const closeSettingsModal = document.getElementById('closeSettingsModal');
-  // --- NEW ON-SCREEN DEBUG CODE ---
-// This will test if the settings button was found correctly.
+// --- ADVANCED ON-SCREEN DEBUG CODE ---
+// This will test for BOTH the button and the modal window.
 
 const debugLog = document.getElementById('debug-log');
+debugLog.style.display = 'block'; // Make sure the box is visible
+
+let debugMessage = "DEBUG LOG:\n\n";
+let testsPassed = true;
+
+// Test 1: Check for the settings button
 if (settingsBtn) {
-    // SUCCESS! The button was found.
-    debugLog.textContent = "DEBUG LOG:\n\n'settingsBtn' was FOUND successfully.";
-    // Change style to green to show success
+    debugMessage += "✅ Test 1: 'settingsBtn' was FOUND successfully.\n";
+} else {
+    debugMessage += "❌ Test 1: 'settingsBtn' was NOT FOUND (is null).\n";
+    testsPassed = false;
+}
+
+// Test 2: Check for the settings modal window itself
+if (settingsModal) {
+    debugMessage += "✅ Test 2: 'settingsModal' was FOUND successfully.\n";
+} else {
+    debugMessage += "❌ Test 2: 'settingsModal' was NOT FOUND (is null).\n\n";
+    debugMessage += "This is the problem. Please check your index.html file for an element with id='settingsModal' and fix any typos.";
+    testsPassed = false;
+}
+
+// Display the final results and set the color
+debugLog.textContent = debugMessage;
+
+if (testsPassed) {
+    // If everything passed, turn the box green
     debugLog.style.borderColor = '#4F8A10';
     debugLog.style.color = '#4F8A10';
     debugLog.style.backgroundColor = '#DFF2BF';
-} else {
-    // ERROR! The button was not found.
-    debugLog.textContent = "DEBUG LOG:\n\n'settingsBtn' was NOT FOUND.\n\nJavaScript got 'null' when searching for the element with id='settingsBtn'.\n\nThis means there is a typo in the 'id' attribute of the settings button in your index.html file.";
 }
-// --- END OF NEW DEBUG CODE ---
+// --- END OF ADVANCED DEBUG CODE ---
 
     // --- CORE FUNCTIONS (for AR and Data) ---