i need suggestions with examples on my script

Question

I was trying to create image thumbnail, page detection and browser detection, my function for browser detection worked but when i create functions for thumbnail and page detection is stop working. As a whole my other functions are not working together in the same script. Can anybody help me what i am doing wrong with my all functions. Please help me with examples because javascript is new for me.

my html for image thumbnail

<section class="image-grid">
    <img id="albumPic1" class="thumb" src="img/aircraft1.png">
    <img id="albumPic2" class="thumb" src="img/aircraft2.jpg">
    <img  class="image-grid-col-2 image-grid-row-2" id="mainImg" src="img/aircraft1.png">
    <img id="albumPic3" class="thumb" src="img/aircraft3.png">
    <img  id="albumPic4" class="thumb" src="img/Paris_Night.jpg">
  </section>

my html for browser detection

<button class="button" onclick="browserDetection()">Check Visitor´s Browser</button>

my css for image thumbnail

.image-grid {
    --gap: 16px;
    --num-cols: 4;
    --row-height: 300px;
  
    box-sizing: border-box;
    padding: var(--gap);
  
    display: grid;
    grid-template-columns: 200px 200px 250px 200px;
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
  }
  
  .image-grid > img {
    width: 100%;
    height: 100%;
  }
  
  .image-grid-col-2 {
    grid-column: span 2;
  }
  
  .image-grid-row-2 {
    grid-row: span 2;
  }

my javascript functions

function start() {
    let path = window.location.pathname;

if (path.endsWith("contact.html")) {
  browserDetection();
} else if (path.endsWith("employees.html") || path.endsWith("ourfleet.html")) {
  registerGalleryEvents();
}// code for page detection, with calls to relevant functions
  }
  
function registerGalleryEvents() {
    let pic1 = document.getElementById('albumPic1');
    pic1.addEventListener('click', e => { displayImage(pic1); }); 

    let pic2 = document.getElementById('albumPic1');
    pic2.addEventListener('click', e => { displayImage(pic2); }); 

    let pic3 = document.getElementById('albumPic1');
    pic3.addEventListener('click', e => { displayImage(pic3); }); 

    let pic4 = document.getElementById('albumPic1');
    pic4.addEventListener('click', e => { displayImage(pic4); }); 
    
    // code to register click events
  }
  
  function displayImage(thumbnail){
    const currentImgSrc = thumbnail.getAttribute("src");
    const [imgName, ext] = currentImgSrc.split(".");
  
    document.getElementById('mainImg').src = imgName + '-big.' + ext;
  }
  
  registerGalleryEvents();
     // code to display larger picture
  
function browserDetection(){
    if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 )
    {
        alert('Opera');
    }
    else if(navigator.userAgent.indexOf("Edg") != -1 )
    {
        alert('Edge');
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
        alert('Chrome');
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
        alert('Safari');
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 )
    {
        alert('Firefox');
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
        alert('IE');
    }
    else
    {
        alert('unknown');
    } // code for browser detection
}