New to Wordpress, CSS, JS, etc. Having trouble adding custom JS - works in console with desired results but not on live site

Question

I apologize for my ignorance, I'm still learning. Trying really hard to understand this all and make it work.

I have a page with an image in a container and I want it to expand when the user clicks on it with an overlay appearing behind it. When clicked again, I want it to go back to normal size and overlay disappear. I'm able to do it via console with this JS code

const images = document.querySelectorAll('.wp-block-uagb-image img.uag-image-4563'); const overlay = document.createElement('div'); overlay.classList.add('uagb-overlay'); document.body.appendChild(overlay); // Style the overlay overlay.style.position = 'fixed'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100vw'; // Full viewport width overlay.style.height = '100vh'; // Full viewport height overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; overlay.style.display = 'none'; overlay.style.zIndex = '9999'; // High z-index to ensure it’s on top overlay.style.justifyContent = 'center'; overlay.style.alignItems = 'center'; images.forEach(image => { image.addEventListener('click', function() { // Create a new image element for the overlay const overlayImage = document.createElement('img'); overlayImage.src = image.src; // Same image source for the overlay overlayImage.style.maxWidth = '90%'; // Limit max size of the image overlayImage.style.maxHeight = '90%'; // Limit max size of the image overlayImage.style.objectFit = 'contain'; // Ensure the image fits within the overlay overlayImage.style.transition = 'transform 0.3s ease-in-out'; // Smooth scaling effect overlay.innerHTML = ''; // Clear any previous overlay content overlay.appendChild(overlayImage); // Add new image to overlay // Show overlay overlay.style.display = 'flex'; // Optional: Scale up the image for expansion effect overlayImage.style.transform = 'scale(1.2)'; }); }); // Close overlay when clicked overlay.addEventListener('click', function() { overlay.style.display = 'none'; // Hide overlay when clicked }); 

When trying to push it live, I tried this: Create custom-script.js in themes/astra-child/js folder Enqueue it with this in the themes/astra-child/functions.php

function custom_script_on_specific_page() { if (is_page(2996)) { wp_enqueue_script('custom-script-js', get_stylesheet_directory_uri() . '/js/custom-script.js', [], false, true); } } add_action('wp_enqueue_scripts', 'custom_script_on_specific_page'); 

I also added this to themes/astra-child/style.css

img.uag-image-4563.expanded { transform: scale(1.5); transition: transform 0.3s ease; z-index: 1000; position: relative; } .uagb-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 9999; } .uagb-overlay.visible { display: flex; } 

and I added this to themes/astra-child/custom-script.js

document.addEventListener('DOMContentLoaded', function() { console.log("JavaScript is loaded and running!"); const images = document.querySelectorAll('.uag-image-4563'); if (images.length === 0) { console.log("No images with the specified class found."); } else { console.log("Images found:", images); } const overlay = document.createElement('div'); overlay.classList.add('uagb-overlay'); document.body.appendChild(overlay); overlay.style.position = 'fixed'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100vw'; overlay.style.height = '100vh'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; overlay.style.display = 'none'; overlay.style.zIndex = '9999'; overlay.style.justifyContent = 'center'; overlay.style.alignItems = 'center'; images.forEach(image => { image.classList.remove('expanded'); image.addEventListener('click', function() { console.log("Image clicked!"); console.log("Clicked image:", this); this.classList.toggle('expanded'); console.log("Current class list:", this.classList); const overlayImage = document.createElement('img'); overlayImage.src = this.src; overlayImage.style.maxWidth = '90%'; overlayImage.style.maxHeight = '90%'; overlayImage.style.objectFit = 'contain'; overlayImage.style.transition = 'transform 0.3s ease-in-out'; overlay.innerHTML = ''; overlay.appendChild(overlayImage); overlay.style.display = 'flex'; overlayImage.style.transform = 'scale(1.2)'; console.log('Overlay visible:', overlay.style.display); }); }); overlay.addEventListener('click', function() { console.log("Overlay clicked. Hiding it."); overlay.style.display = 'none'; }); }); 

After saving everything, I purged cache via litespeed and cleared cache on hostinger

Any ideas why it works in console but not when I push it live? When I click the image on the live version, nothing happens but you can see the scrollbar jump like the image expanded.

I was troubleshooting with ChatGPT and Dom readiness was a hang up consistently. Troubleshooting would always halt there with codes being undefined in console

Thank you for any help