如何解决无法在我的函数 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 内容加载后运行:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。