无法在我的函数 js 中设置属性 'onclick' of null

Question

我有问题。我使用 javascript 来设置显示块或显示 none。我在控制台中收到错误“Uncaught TypeError: Cannot set 属性 'onclick' of null 在 script.js?ver=1.0.0:15"。我在页眉中添加了一个脚本标记，然后在页脚中添加了一个脚本标记，仍然相同。我还在我的脚本标签中添加了延迟，但仍然没有。它在另一个站点上工作的功能。

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>

Answer 1

尝试使用 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 内容已加载时:)

无法在我的函数 js 中设置属性 'onclick' of null

Cannot set property 'onclick' of null in my function js

javascript

wordpress

custom-theme

无法在我的函数 js 中设置 属性 'onclick' of null

Cannot set property 'onclick' of null in my function js

javascript

wordpress

custom-theme

无法在我的函数 js 中设置属性 'onclick' of null