getElementById的Id重复声明问题：如何实现Markdown多剧透按钮代码自动化处理

方案解答 #

1. 最低需求：提取ID为变量精简代码 #

可以将ID提取为局部变量，减少重复取值逻辑，新增按钮时仅需修改2处ID值即可，代码如下：

<button title="Click to show answer" type="button" class="btn btn-primary"
   onclick="const spoilerId = 'spoiler1';
            const spoilerEl = document.getElementById(spoilerId);
            spoilerEl.style.display = spoilerEl.style.display === 'none' ? '' : 'none'">
  show/hide
</button>
<div id="spoiler1" style="display:none">
***
Hidden Text
***
</div>

你只需要每次新增时修改const spoilerId = 'spoiler1'里的ID值，和对应div的id属性即可，比原来的4处操作减少一半。

2. 最高需求：自动绑定无需手动修改ID #

完全不需要手动定义ID，利用DOM节点相邻关系直接匹配对应隐藏区域，新增按钮时直接复制整段结构即可，不需要修改任何代码，实现零配置复用：

<button title="Click to show answer" type="button" class="btn btn-primary"
   onclick="const spoilerEl = this.nextElementSibling;
            spoilerEl.style.display = spoilerEl.style.display === 'none' ? '' : 'none'">
  show/hide
</button>
<div style="display:none">
***
Hidden Text
***
</div>

核心逻辑说明：

• 用this直接获取当前点击的按钮DOM对象
• 用nextElementSibling获取按钮后面紧跟的隐藏区域节点，不需要通过ID匹配
• 新增任意多组切换按钮，直接复制上述代码修改隐藏区域的内容即可，不需要做任何ID相关的调整

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