Is there a way for a JS script to affect only a part of my HTML code?-CodePudding

I'm using JS for the first time to display/hide images depending on if a button is pressed: if the "New version" button is pressed, I want the "new" image to appear and the "old" to hide, and vice-versa for the "Old version" button. Here's my Code :

function showOld() {
  document.getElementById('new')
    .style.display = "none";

  document.getElementById('old')
    .style.display = "block";

  document.getElementById('btn-to-old')
    .classList.toggle('btn-click');

  document.getElementById('btn-to-new')
    .classList.toggle('btn-click');
}

function showNew() {
  document.getElementById('old')
    .style.display = "none";

  document.getElementById('new')
    .style.display = "block";

  document.getElementById('btn-to-new')
    .classList.toggle('btn-click');

  document.getElementById('btn-to-old')
    .classList.toggle('btn-click');
}

<div >
  <div >
    <h2>Index</h2>
    <div >
      <button type="button" onclick="showOld()" id="btn-to-old" >Old version</button>
      <button type="button" onclick="showNew()" id="btn-to-new">New version</button>
    </div>
    <img src="img/old-index.png" alt="old-index" id="old">
    <img src="img/new-index.png" alt="new-index" id="new">
  </div>
</div>
<div >
  <div >
    <h2>Home</h2>
    <div >
      <button type="button" onclick="showOld()" id="btn-to-old" >Old version</button>
      <button type="button" onclick="showNew()" id="btn-to-new">New version</button>
    </div>
    <img src="img/old-home.png" alt="old-index" id="old">
    <img src="img/new-home.png" alt="new-index" id="new">
  </div>
</div>

Needless to say that this code doesn't work, and pressing the second set of buttons will change the first images and not the second ones. The idea is that only the two images directly below the buttons will be affected by the pressing of the button above them, and not the images down the page. I don't know how to get such a result.

I'm aware that I cannot use the same ID twice, but using classes somehow broke my page.

CodePudding user response：

As you said, you can't have duplicate IDs, so you need to use classes.

Use DOM navigation operations to address the elements in the same container as the button you cllick.

function showOld(el) {
  let container = el.closest(".container");
  container.querySelector('.new')
    .style.display = "none";

  container.querySelector('.old')
    .style.display = "block";

  container.querySelector('.btn-to-old')
    .classList.toggle('btn-click');

  container.querySelector('.btn-to-new')
    .classList.toggle('btn-click');
}

function showNew(el) {
  let container = el.closest(".container");
  container.querySelector('.old')
    .style.display = "none";

  container.querySelector('.new')
    .style.display = "block";

  container.querySelector('.btn-to-new')
    .classList.toggle('btn-click');

  container.querySelector('.btn-to-old')
    .classList.toggle('btn-click');
}

.btn-click {
  color: green;
}

<div >
  <div >
    <h2>Index</h2>
    <div >
      <button type="button" onclick="showOld(this)" >Old version</button>
      <button type="button" onclick="showNew(this)" >New version</button>
    </div>
    <img src="img/old-index.png" alt="old-index" >
    <img src="img/new-index.png" alt="new-index" >
  </div>
</div>
<div >
  <div >
    <h2>Home</h2>
    <div >
      <button type="button" onclick="showOld(this)" >Old version</button>
      <button type="button" onclick="showNew(this)" >New version</button>
    </div>
    <img src="img/old-home.png" alt="old-index" >
    <img src="img/new-home.png" alt="new-index" >
  </div>
</div>