How to show the selected element in javascript

Question

I would like to open a modal that shows a pdf according to the selected text, but only the first one in the list is shown. What should I do?

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>

scripts.js

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

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

Does this answer your question? [JavaScript and getElementById for multiple elements with the same ID](https://stackoverflow.com/questions/3607291/javascript-and-getelementbyid-for-multiple-elements-with-the-same-id) — Heretic Monkey, May 07 '20 at 18:01

score 3 · Accepted Answer · answered May 07 '20 at 18:13

you shouldn't use same id element, it would work here but it's frowned upon. I've created a demo with the same class. Of course, the iframe wouldn't load. I've done the explaining in the code itself. See, if it works for you.

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>

See the difference between innerText and textContent here.

I replaced the ids with classes and the textcontent with innnertext and the modals didn't open anymore — Murilo de Jesus, May 07 '20 at 18:18
But replacing just the ids with classes worked perfectly. Thanks — Murilo de Jesus, May 07 '20 at 18:19

score 2 · Answer 2 · answered May 07 '20 at 18:01

2

You shouldn't use non-unique ids. If you replace id with a class, the code should work.

answered May 07 '20 at 18:01

V1raNi

313
1
11

score 1 · Answer 3 · answered May 07 '20 at 18:15

You should use classes instead, id's of elements should always be unique

<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>

This should work,

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

...

How to show the selected element in javascript

3 Answers3