无法在我的函数 js 中设置 null 的属性“onclick”

问题描述

我有问题。我使用 javascript 设置显示块或不显示。我在控制台中收到错误消息“Uncaught TypeError: Cannot set property 'onclick' of null at script.js?ver=1.0.0:15"。我在页眉中添加了一个脚本标记，然后在页脚中添加了一个脚本标记，但仍然相同。 我还在脚本标签中添加了 defer ，但仍然没有。在另一个网站上运行的功能。

JS代码

    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 和 PHP 代码

            <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>

解决方法

尝试使用 DOMContentLoaded 事件：

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';
    }
});

现在脚本应该只在 Html 内容加载后运行:)