1

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

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

1 回答 1

2

尝试使用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 内容时运行:)

于 2021-03-11T12:26:35.323 回答