Как показать выбранный элемент в javascript

Question

Я хочу открыть модальное окно, в котором отображается PDF-файл в соответствии с выделенным текстом, но отображается только первый из них в списке. Что делать?

index. html

<p><a id="other-activies-link">Semana Omnistack 11</a></p>
<p><a id="other-activies-link">28ª Semana do IME</a></p>

<div id="myModal" class="modal">
 <div class="modal-content">
  <span class="close">&times;</span>
  <iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

скрипты. js

const selectedActivity = document.querySelectorAll("#other-activies-link");

selectedActivity.forEach((link) => {
  link.addEventListener("click", () => {
    document.getElementById(
      "myFrame"
    ).src = `/files/${event.target.textContent}.pdf`;
  });
});

Answer 1

, вы не должны использовать тот же элемент id, он будет работать здесь, но это не одобряется. Я создал демо с тем же class. Конечно, iframe не загружается. Я сделал объяснение в самом коде. Посмотрите, сработает ли это для вас.

const selectedActivity = document.querySelectorAll(".other-activies-link");

selectedActivity.forEach((link) => {
  link.addEventListener("click", (event) => { // pass event parameter here
  
    document.getElementById(
      "myFrame"
    ).src = `/files/${event.target.innerText}.pdf`; // use innerText instead
    console.clear();
    console.log(event.target.innerText);
    console.log(event.target.textContent);
  });
});

<p><a class="other-activies-link">Semana<br> Omnistack 11</a></p>
<p><a class="other-activies-link">28ª Semana do IME</a></p>

<div id="myModal" class="modal">
 <div class="modal-content">
  <span class="close">&times;</span>
  <iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Смотрите разницу между innerText и textContent здесь .

Answer 2

Вы не должны использовать неуникальные идентификаторы. Если вы замените id на класс, код должен работать.

Answer 3

Вместо этого вы должны использовать классы, идентификаторы элементов всегда должны быть уникальными

<p><a class="other-activies-link">Semana Omnistack 11</a></p>
<p><a class="other-activies-link">28ª Semana do IME</a></p>

<div id="myModal" class="modal">
 <div class="modal-content">
  <span class="close">&times;</span>
  <iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Это должно работать,

const selectedActivity = document.querySelectorAll(".other-activies-link");

...