HTML [Показать] Код Показывает только 1 из них, когда добавлено 2?

Question

Когда я добавляю код ниже.

<a id="show_id" 
    onclick="document.getElementById('spoiler_id').style.display=''; 
      document.getElementById('show_id').style.display='none';" 
    class="link"> 
    [Show] 
</a> 
<span id="spoiler_id" style="display: none"> 
    <a onclick="document.getElementById('spoiler_id').style.display='none'; 
       document.getElementById('show_id').style.display='';" 
    class="link"> 
    [Hide] 
    </a> 
<br> 
INSERT CONTENT HERE 
</span> 

Я могу получить только 1 из этих кодов, чтобы на самом деле работать, когда я поместил 2 из них в HTML-страницу? Любая помощь в том, почему это происходит?

Приветствия, Джеймс

Answer 1

Добавление второго кодового блока работает, но вы должны убедиться, что вы используете идентификаторы различны для обоих блоков. Предполагаемый блок 1 имеет идентификаторы и spoiler_id, а блок 2 имеет идентификаторы show_id и spoiler_id, а затем document.getElementById(show_id) всегда будет выбирать первое вхождение show_id.

<!--Code blocks. Note they both have the same IDs and getElementById--> 
 
<!--Block 1--> 
 
<a id="show_id" 
 
    onclick="document.getElementById('spoiler_id').style.display=''; 
 
      document.getElementById('show_id').style.display='none';" 
 
    class="link"> 
 
    [ShowBlock1] 
 
</a> 
 
<span id="spoiler_id" style="display: none"> 
 
    <a onclick="document.getElementById('spoiler_id').style.display='none'; 
 
       document.getElementById('show_id').style.display='';" 
 
    class="link"> 
 
    [Hide] 
 
    </a> 
 
<br> 
 
INSERT CONTENT HERE 
 
</span> 
 

 
<!--Block 2--> 
 
<a id="show_id" 
 
    onclick="document.getElementById('spoiler_id').style.display=''; 
 
      document.getElementById('show_id').style.display='none';" 
 
    class="link"> 
 
    [ShowBlock2] 
 
</a> 
 
<span id="spoiler_id" style="display: none"> 
 
    <a onclick="document.getElementById('spoiler_id').style.display='none'; 
 
       document.getElementById('show_id').style.display='';" 
 
    class="link"> 
 
    [Hide] 
 
    </a> 
 
<br> 
 
INSERT CONTENT HERE 
 
</span>

Вы должны изменить идентификаторы блока 2, чтобы убедиться, что он относится к себе, а не другие блоки. Просто измените show_id и spoiler_id на что-то еще, а затем измените команду getElementById(). Here's the JSFiddle for that.