JavaScript在选择其中一个选项之前工作。

Question

我有一个页面，如果你选择其中一个选项的话，它会对事情进行排序。过滤器的列表太长了，所以我添加了一个div来显示/隐藏选项。在页面加载中，一些选项是通过CSS和display: hidden隐藏的。下面的代码只是根据点击次数将display从display: none更改为display: inline-block。

var timesClicked = 0;

window.onload = function(){
    document.getElementById("filter_attribute_217").onclick = function(){
    timesClicked++;
      if (timesClicked%2==0){
        hide();
      } else {
        show();
      }
 };

这是show()函数。

function show(){
document.getElementById("filter_attribute_69").style.display="inline-block";
document.getElementById("filter_attribute_70").style.display="inline-block";
document.getElementById("filter_attribute_72").style.display="inline-block";

//all those other options

document.getElementById("filter_attribute_217").innerHTML = "less";
document.getElementById("filter_attribute_217").style.borderTop = "1px dashed #e1e4e6";
document.getElementById("filter_attribute_68").style.borderBottom = "none";
document.getElementById("filter_attribute_87").style.borderBottom = "none";
}

这是隐藏()函数。

function hide(){
document.getElementById("filter_attribute_217").innerHTML = "more";
document.getElementById("filter_attribute_217").style.borderTop = "1px dashed #e1e4e6"
document.getElementById("filter_attribute_69").style.display="none";
document.getElementById("filter_attribute_70").style.display="none";

//all those other options

document.getElementById("filter_attribute_103").style.display="none";
}

这是完美的工作，直到我选择其中一个选项，这意味着其他一些消失。然后，当尝试使用“多/少”按钮时，我会得到如下错误：

Uncaught TypeError: Cannot read properties of null (reading 'style')
    at hide (user.js?sci=481:68:50)
    at document.getElementById.onclick (user.js?sci=481:58:9)

再次单击它会显示与show()函数相同的错误。我尝试过用document.body.contains(YOUR_ELEMENT_HERE);检查DOM结构中是否存在元素，但始终显示所有选项都存在。用

if(document.body.contains(element){
console.log("exists")
} else {
console.log("doesn't exist")
}

控制台总是输出“存在”。

然后，我试图忽略这个问题，看看其他选项是否会显示在

function stoperror() {
return true;
};
window.onerror = stoperror;

但结果是一样的，没有错误。我不知道为什么会发生这种事，我怎样才能解决它。我需要补充的是，我在这里可以编辑的只有JavaScript和CSS。这就是为什么我做出了另一个选择(filter_attribute_217)，并将它放入我的“多/少”按钮中。

编辑

这是基本上每个选项的HTML代码。他们唯一改变的是从选项到选项的id和href。

<div data-limit="3" class="group group-filter" id="filter_attribute_104">
<h5>
Transparent
</h5>
<ul>
<li class="" style="margin-right:15px;">
<a title="tak" href="/pl/c/Balls/119/1/default/1/f_at_104_0/1">
<i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
<span>tak </span>
<em>(56)</em>
</a>
</li>
</ul>

<div data-limit="3" class="group group-filter" id="filter_attribute_68">
<h5>
White
</h5>
<ul>
<li class="" style="margin-right:15px;">
<a title="tak" href="/pl/c/Balls/119/1/default/1/f_at_68_0/1">
<i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
<span>tak </span>
<em>(208)</em>
</a>
</li>
</ul>

我的JS代码中也有这个

window.addEventListener("DOMContentLoaded",(event) => {
document.getElementById("filter_attribute_217").innerHTML = "więcej";
 document.getElementById("filter_attribute_217").style.borderTop = "1px dashed #e1e4e6";
});

Answer 1

这是您提供的代码的一个示例。然而，你的问题仍然没有得到适当的说明。我假设HTML是动态生成的？如果是这样的话，我将确保在调用JS时，我尝试使用的元素确实是现有的(当然是)。所以我去掉了你正在使用的window.onload。另外，如果您想应用全局更改，不要对每个ID重复相同的内容，只需使用querySelectorAll('.classname')和.forEach。示例：

​

let timesClicked = 0;

let show = () => {
  document.querySelector('.group-filter').innerHTML = 'LESS';
  document.querySelectorAll('.group-filter').forEach(elem => {
    elem.style.display = 'flex';
    // Other things...
  });
}

let hide = () => {
  document.querySelector('.group-filter').innerHTML = 'MORE';
  document.querySelectorAll('.group-filter').forEach(elem => {
    elem.style.display = 'none';
    // Other things...
  });
  // Restore the first element's display
  document.querySelector('.group-filter').style.display = 'flex';
}

document.getElementById('filter_attribute_104').addEventListener('click', () => {
  timesClicked++;
  if (timesClicked % 2 == 0) hide();
  else show();
});

.hidden {display:none;}

<div data-limit="3" class="group group-filter" id="filter_attribute_104">
  <h5>Transparent</h5>
  <ul>
    <li class="" style="margin-right:15px;">
      <a title="tak" href="#">
        <i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
        <span>tak </span>
        <em>(56)</em>
      </a>
    </li>
  </ul>
</div>

<div data-limit="3" class="group group-filter hidden" id="filter_attribute_68">
  <h5>White</h5>
  <ul>
    <li class="" style="margin-right:15px;">
      <a title="tak" href="#">
        <i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
        <span>tak </span>
        <em>(208)</em>
      </a>
    </li>
  </ul>
</div>

<div data-limit="3" class="group group-filter hidden" id="filter_attribute_168">
  <h5>Red</h5>
  <ul>
    <li class="" style="margin-right:15px;">
      <a title="tak" href="#">
        <i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
        <span>tak </span>
        <em>(332)</em>
      </a>
    </li>
  </ul>
</div>

​