Cannot set property ‘onclick’ of null in my function js

I have a problem. I used javascript for settings display block or display none. I get an error in the console “Uncaught TypeError: Cannot set property ‘onclick’ of null at script.js?ver=1.0.0:15”. I added a script tag in the header, then in the footer and still the same. Also I added defer in my script tag and still nothing. Function it works on another site.

JS Code

    var element = document.getElementById('powierzchnia');
    if (element.className === 'show col-12 gallery-block grid-gallery') {
        element.className = 'hide col-12 gallery-block grid-gallery';
        document.getElementById('powierzchnia_chup').style.display = 'none';
        document.getElementById('powierzchnia_chdown').style.display = 'inline';
    } else {
        element.className = 'show col-12 gallery-block grid-gallery';
        document.getElementById('powierzchnia_chup').style.display = 'inline';
        document.getElementById('powierzchnia_chdown').style.display = 'none';
    }
}

HTML and PHP code

            <div class="first-box">
                <h4 id="show-powierzchnia" style="cursor: pointer;">
                    <span>Powierzchnia panela</span>
                    <span class="span-fr">
                        <img id="powierzchnia_chup" style="display: none;" src="<?php echo get_template_directory_uri(); ?>/img/chervon-up.svg" />
                        <img id="powierzchnia_chdown" src="<?php echo get_template_directory_uri(); ?>/img/chervon-down.svg" />
                    </span>
                </h4>
            </div>
            <div id="powierzchnia" class="hide col-12 gallery-block grid-gallery">
                <div class="row">
                    <?php
                    foreach( $media_wzory_powierzchnia as $wzory ){
                        echo '<div class="col-md-3 item item-custom-gallery mb-3">';
                        echo '<a class="lightbox" href="'.wp_get_attachment_url($wzory['zdjecie_powierzchni']).'">';
                        echo '<img class="img-gallery image scale-on-hover" src="'.wp_get_attachment_url($wzory['zdjecie_powierzchni']).'">';
                        echo '<div class="w-100 text-center">';
                        echo '<h5>'.$wzory['nazwa_powierzchni'].'</h5>';
                        echo '</div>';
                        echo '</a>';
                        echo '</div>';
                    }
                    ?>
                </div>
            </div>

Answer

try using DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", function() {
    // code...
    var element = document.getElementById('powierzchnia');
    if (element.className === 'show col-12 gallery-block grid-gallery') {
        element.className = 'hide col-12 gallery-block grid-gallery';
        document.getElementById('powierzchnia_chup').style.display = 'none';
        document.getElementById('powierzchnia_chdown').style.display = 'inline';
    } else {
        element.className = 'show col-12 gallery-block grid-gallery';
        document.getElementById('powierzchnia_chup').style.display = 'inline';
        document.getElementById('powierzchnia_chdown').style.display = 'none';
    }
});

Now the script should run only when the Html content has been loaded 🙂