开发者问题收集

Javascript 样式错误

2018-03-14
425

我的 JS 脚本向我发送了该错误:

Uncaught TypeError: Cannot read property 'style' of null at myFunction ((index):1368) at HTMLDivElement.onclick ((index):1354) myFunction @ (index):1368 onclick @ (index):1354

这是我的代码:

function myFunction() {

  var y = document.getElementById("woocommerce_product_categories-1");
  var x = document.getElementById("shop-sidebar");

  console.log("x.style.display1");

  x.style.display = 'none';

  console.log("x.style.display");

  if (x.style.display == "none") {
    y.style.display = "none";
    x.style.position = "fixed";
    x.style.display = "block";
    x.style.zIndex = 9;
    x.style.top = "126px";
    x.style.width = "100%";
    x.style.background = "#fff";
    x.style.height = "calc(100vh - 126px)";
    x.style.overflowY = "scroll";
  } else {
    x.style.display = "none";
    x.style.zIndex = 0;
  }

  var x = document.getElementById("menu-mobile-header");
  if (x.style.position === "absolute") {
    x.style.position = "fixed";
  } else {
    x.style.position = "absolute";
  }
  var x = document.getElementById("menu-mobile-header");
  if (x.style.top === "195px") {
    x.style.top = "60px";
  } else {
    x.style.top = "195px";
  }
  var x = document.getElementById("menu-mobile-header");
  if (x.style.zIndex === "0") {
    x.style.zIndex = "9";
  } else {
    x.style.zIndex = "0";
  }


}
<?php if(is_product_category())
{ ?>

<div id="menu-mobile-header">
  <div class="menu-mobile-header" onclick="myFunction()">Filtern</div>
</div>

<?php } ?>

Console.log 向我发送带有 x.style.display1 的消息,但在第二条消息中我发现了错误。

我还注意到该代码可以运行,但没有 php。

也许有人知道为什么我不能使用 JS 中的任何样式?

祝您有美好的一天!

1个回答

这是因为 xnull

您使用 document.getElementById 创建 x (第 8 行),但是您没有具有 id="shop-sidebar" 属性的 DOM 元素。

Sandwell
2018-03-14