Javascript functions review + When applied to a specific WordPress page it reloa

I make use of the (built-in) WordPress image gallery, it contains 36 images(figures). I want to break up the gallery and standard hide the images from the 26th image, then insert a new figure element which acts like a button and if clicked shows the other images and hide the button, kind of toggle.

I’m new to javaScript and pieced together 2 functions, when applied to the page from Chrome developer console, it works like i want it to, but when i call the function from WordPress functions.php like described in the code below, it shows the rest of the images for like 2 seconds and then it starts over.

The Chrome console gives me this error

?w3tc_minify=51de0.js:7 Uncaught TypeError: Cannot read property ‘style’ of null at createGalleryFigure (?w3tc_minify=51de0.js:7) at (index):189 createGalleryFigure @ ?w3tc_minify=51de0.js:7 (anonymous) @ (index):189

Please, review my code, give me suggestions, is this good coding, what goes wrong?

Thnx in advance!

// insert images javaScript
function createGalleryFigure() {
    var elems = document.querySelectorAll(".gallery-item");
    var n = 26;
    for (var i = n; i < elems.length; i++) {
        elems[i].style.display = "none";
    }

    var galleryDiv = document.getElementById("gallery-4");

    var a = document.createElement("FIGURE");
        a.setAttribute("class", "gallery-item");
        a.setAttribute("id", "meerButton");
        galleryDiv.style.display = "none";
        galleryDiv.appendChild(a);  

    var b = document.createElement("DIV");
        b.setAttribute("class", "gallery-icon landscape");
        a.appendChild(b);

    var c = document.createElement("DIV");
        c.setAttribute("class", "meer");
        b.appendChild(c);   

    var d = document.createElement("A");
        d.setAttribute("onclick", "showOther();");
        d.setAttribute("id", "moreProjects");
        d.setAttribute("class", "no-lightbox");
        c.appendChild(d);

    var e = document.createElement("IMG");
        e.setAttribute("width", "400");
        e.setAttribute("height", "168");
        e.setAttribute("src", "*pathToImage*");
        e.setAttribute("class", "image-overlay attachment-full size-full");
        e.setAttribute("id", "meer");
        e.setAttribute("alt", "Meer projecten");
        e.setAttribute("aria-describedby", "gallery-4-666");
        e.setAttribute("sizes", "(max-width: 400px) 85vw, 400px");
        e.setAttribute("title", "Meer projecten");
        d.appendChild(e);

    var f = document.createElement("DIV")
        f.setAttribute("class", "overlay");
        c.appendChild(f);
        d.appendChild(f);

    var g = document.createElement("DIV")
        g.setAttribute("class", "text");
        g.innerHTML = "Meer projecten";
        f.appendChild(g);
}

// Show Other Elements
function showOther() {
    var elems = document.querySelectorAll(".gallery-item");
    var n = 26;
    for (var i = n; i < elems.length; i++) {
        elems[i].style.display = "inline-block";
        elems[i].style.maxWidth = "33.33%";
        elems[i].style.padding = "0 1.1400652% 2.2801304%";
        elems[i].style.textAlign = "center";
        elems[i].style.verticalAlign = "top";
        elems[i].style.width = "100%";
    }
    var button = document.querySelector('#meerButton');
        button.style.display = "none";
}

// functions.php
 add_action( 'wp_footer', 'hideProjects' );

function hideProjects()
{
    if( !is_page( 'overzicht-projecten' ) )
        return;

    ?>
    <script type="text/javascript" src="*pathToScript*"></script>
    <script type="text/javascript">
        window.onload = createGalleryFigure();        
    </script>
    <?php           
};