javascript - 我想制作一个“剧透警报”按钮 (2)

Question

我想制作一个“剧透警报”按钮

首先，感谢你们，我得到了我想要的。但是，我又想到了一个问题。

let btn = document.getElementById("change");
let spoilSpan = document.getElementById("spoiled");
btn.addEventListener("click", spoilerAlert);

function spoilerAlert() {
  spoilSpan.classList.toggle("show");
}

.spoiler {
  display: inline-block;
  background: #000;
  padding: 1px;
}

.show {
  display: inline-block;
  background: none;
}

<button id="change">Spoiler Alert</button>
<br><br>

<span>Not Spoiler</span>
<br><br>

<span class='spoiler' id='spoiled'>
  Spoiler
</span><br><br>
  
<span>Not Spoiler</span>
<br><br>

<span class='spoiler' id='spoiled'>
  Spoiler
</span>

我希望它与一个按钮一起工作。但是，最后一个“扰流板”不起作用。

我该怎么办？

我很抱歉什么都不知道。

标签： javascripthtmlcssbutton

Answer 1

拥有多个相同的元素id会使您的 HTML 无效。在这种情况下，getElementById将仅返回不是您需要的第一个匹配元素。

改为这样写：

function spoilerAlert() {
  Array.from(document.getElementsByClassName('spoiler')).forEach(x => {
    x.classList.toggle("show");
  });
}

您的代码段固定如下：

let btn = document.getElementById("change");
let spoilSpan = document.getElementById("spoiled");
btn.addEventListener("click", spoilerAlert);

function spoilerAlert() {
  Array.from(document.getElementsByClassName('spoiler')).forEach(x => {
    x.classList.toggle("show");
  });
}

.spoiler {
  display: inline-block;
  background: #000;
  padding: 1px;
}

.show {
  display: inline-block;
  background: none;
}

<button id="change">Spoiler Alert</button>
<br><br>

<span>Not Spoiler</span>
<br><br>

<span class='spoiler' id='spoiled'>
  Spoiler
</span><br><br>
  
<span>Not Spoiler</span>
<br><br>

<span class='spoiler' id='spoiled'>
  Spoiler
</span>