I have an html portlet I've used for years that shows a preview and links to marketing emails campaigns. I wanted to add event listeners to the images to show an enlarged image if you hover over it for more than 1 sec. I got it working locally but when I uploaded it, it doesn't work. I did some logging from the script and it seems like it's loading and running, just not on the images in the portlet. Does anyone know if what I'm trying to do is even possible? The Portlet Script

function getHtml() {
    var content = nlapiLoadFile('623425').getValue();
    var template = Handlebars.compile(content);
    return template({json: '', entryCount: entryCount});
}

function init(portlet, column){
    portlet.setTitle('TJB');    
    portlet.setHtml(getHtml());
}

In the HTML File

<script>
            console.log('+');            
                
            document.querySelectorAll('.full_size').forEach(function(el){
                var el_src = el.src;
                var lg_src = el.src.replace('thumb', 'full');
                var delay;
                var delay_ms = 1000; 

                el.addEventListener('mouseenter', function(evt){
                    console.log('mouseenter evt', evt);
                    delay = setTimeout(function(){
                        el.src = lg_src;
                        el.className = el.className + ' zoom';
                    },delay_ms);
                });

                el.addEventListener('mouseleave', function(evt){
                    console.log('mouseleave evt', evt);
                    clearTimeout(delay);
                    el.className = el.className.replace(' zoom', '');
                    console.log('el.className ', el.className );
                    el.src = el_src;
                });
            });
        </script>