How to get getElementById focus all ID's in HTML

Question

function linksSwap() {
  document.getElementById("left").style.display = "none";
  document.getElementById("right").style.display = "table-row";
}

function rechtsSwap() {
  document.getElementById("right").style.display = "none";
  document.getElementById("left").style.display = "table-row";
}

<ul>
  <li><a onclick="linksSwap()" href="#">Left</a></li>
  <li><a onclick="rechtsSwap()" href="#">Right</a></li>
</ul>

<div class="tabel">
  <table class="tg" id="eersteTabel">
    <tbody>
      <tr id="right">
        <td class="tg-1h1z">Coca Cola 1 </td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
      <tr id="right">
        <td class="tg-1h1z">Coca Cola Zero 2</td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
      <tr id="right">
        <td class="tg-1h1z">Coca Cola Light 3</td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
      <tr id="left">
        <td class="tg-1h1z">F&#239;nley Bitter Lemon 4 </td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
      <tr id="left">
        <td class="tg-1h1z">Cassis 5</td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

I made a code where I have this table which I want to order [Left | Right] I hoped the javascript would target all the ID's. Instead of only one. (I left out CSS because its not important)

I added numbers to make it a bit more clear,

What is happening: Pressing Left: 1235 Pressing Right: 2345

What I want: Left: 45 Right: 123

Is there another way to fix this instead of using a forloop?

Add working code since topic is closed.

function linksSwap() {
  document.querySelectorAll(".left").forEach(function(e){e.style.display = "none"})
  document.querySelectorAll(".right").forEach(function(e){e.style.display = "table-row"})
}

function rechtsSwap() {
  document.querySelectorAll(".left").forEach(function(e){e.style.display = "table-row"})
  document.querySelectorAll(".right").forEach(function(e){e.style.display = "none"})
}

<ul>
  <li><a onclick="linksSwap()" href="#">Left</a></li>
  <li><a onclick="rechtsSwap()" href="#">Right</a></li>
</ul>

<div class="tabel">
  <table class="tg" id="eersteTabel">
    <tbody>
      <tr class="right">
        <td class="tg-1h1z">Coca Cola 1 </td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
      <tr class="right">
        <td class="tg-1h1z">Coca Cola Zero 2</td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
      <tr class="right">
        <td class="tg-1h1z">Coca Cola Light 3</td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
      <tr class="left">
        <td class="tg-1h1z">F&#239;nley Bitter Lemon 4 </td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
      <tr class="left">
        <td class="tg-1h1z">Cassis 5</td>
        <td class="tg-utt9">
          <input type="tel" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

You can't do it with `getElementById()` for the simple reason that ID's must be unique in a page. Think of them like an address....can't send mail to someone if 10 other places have exact same address, it will end up going to the first place found that matches — charlietfl, Jul 18 '20 at 16:43
Ahhh that's what I thought, could I change it to a class? Would that work? — Zeeebass, Jul 18 '20 at 16:45
Yes then loop over the collection of that class and treat each instance separately inside the loop — charlietfl, Jul 18 '20 at 16:46
Loop over the collection with a forloop and index right? Thank you so much btw, I totally forgot — Zeeebass, Jul 18 '20 at 16:51

score -1 · Answer 1 · answered Jul 18 '20 at 16:47

You are forgetting one very basic and fundamental concept of HTML that the same class can be given to any number of elements in an HTML document, but id has to be unique. That means one id can be assigned to one and only one element in the entire html document. Thats the sole purpose IDs were made, to be unique. This is what is resulting in the error

How to get getElementById focus all ID's in HTML

1 Answers1