Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Summary

While running the METAVERSE site locally and on GitHub Pages, multiple runtime JavaScript errors occur that break functionality and cause the deployed site to behave differently from local runs.

These errors are caused by missing DOM element guards, incorrect element IDs, and assumptions that certain assets and elements always exist.

Errors observed

• Uncaught TypeError: Cannot set properties of null (setting 'checked')
• Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
• Uncaught TypeError: Cannot read properties of null (reading 'style')
• Uncaught TypeError: Cannot read properties of null (reading 'play')
• Multiple 404 errors for missing images under assets/img/
• Fetch requests failing due to incorrect relative paths

Root causes identified

• JavaScript accessing DOM elements without checking if they exist
• Mismatch between HTML IDs (theme-toggle) and JavaScript references (themeToggle)
• Global scripts running on pages where required elements are not present
• Missing fallback handling for optional assets (images, audio)
• Absolute or incorrect paths breaking GitHub Pages deployment

Impact

• Theme toggle crashes on page load
• Pagination and interaction scripts fail
• Scroll progress bar and contributors section crash on some pages
• Console flooded with runtime errors and 404s
• Deployed site appears broken compared to local environment

Expected behavior

Proposed fixes

• Add defensive null checks before accessing DOM elements in all scripts
• Ensure consistent element IDs between HTML and JavaScript (theme-toggle)
• Wrap inline JavaScript inside DOMContentLoaded
• Guard optional features (audio playback, contributors container, progress bar)
• Replace absolute paths with relative paths for GitHub Pages compatibility
• Add fallback handling for missing project images
• Consolidate or align theme logic to prevent duplicate implementations

Add ScreenShots/Videos

Before:

After:

On which device are you experiencing this bug?

Windows

Record

• I have read the Contributing Guidelines
• I'm a KWOC 2025-26 contributor
• I'm a SWOC 2026 contributor
• I'm a ECWOC 2026 contributor
• I have starred the repository