点击按钮切换段落显示异常：多按钮误控同一元素的解决咨询

兄弟，你的问题其实出在两个地方：一是你给两个div用了同一个id="hideDIV"，HTML里id必须是唯一的，浏览器只会找到第一个匹配的元素，所以第二个按钮点了还是在操作第一段；二是你的myFunction没有指定要操作哪个目标，一直盯着同一个id找元素。

我给你改一下代码，保证每个按钮只控制对应的段落：

首先修改HTML部分，给两个div设置唯一的id，然后让按钮调用函数时把对应id传进去；接着调整JS函数，接收这个id参数，去操作对应的元素。

完整代码如下：

<script>
function myFunction(targetId) {
  var x = document.getElementById(targetId);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<button onclick="myFunction('hideDIV1')">
  <b>Button One</b><br>
</button>
<div id="hideDIV1">
  <p>This is a sample paragraph.</p>
</div>
<br>

<button onclick="myFunction('hideDIV2')">
  <b>Button Two</b><br>
</button>
<div id="hideDIV2">
  <p>This is a sample paragraph 2.</p>
</div>

改动说明： #

• 把两个div的id分别改成hideDIV1和hideDIV2，确保每个元素id唯一
• 按钮的onclick事件改成myFunction('对应id')，把要操作的div的id传给函数
• JS函数新增targetId参数，用这个参数去获取对应的元素，这样每次点击按钮就只会操作对应的段落啦！

内容的提问来源于stack exchange，提问作者ethan davis