Модалы, показывающие только содержимое последней кнопки на нескольких кнопках

Question

Я новичок в кодировании и надеюсь создать три кнопки, открывающие три разных мода - пока что я только собирался получить содержимое последней кнопки, отображаемой для всех трех (когда я закомментировал этовторая кнопка работает для первых двух кнопок, и когда она закомментирована, первая работает для первой кнопки). Я пытался изменить div для классов, но безрезультатно. Любая помощь будет оценена!

HTML:

  <!--First Button-->

  <div class="btn">
    <button id="btn-name">
      <h1>NAME</h1>
    </button>
  </div>

  <br>

  <div class="btn">
    <button id="btn-news">
      <h1>NEWS</h1>
    </button>
  </div>

  <br>

  <div class="btn">
    <button id="btn-cv">
      <h1>CV</h1>
    </button>
  </div>

  <!-- The Modal -->
  <div id="modal1" class="modal1">

    <!-- Modal content -->
    <div class="modal1-content">
      <span class="close1">&times;</span>
      <h4>ONE</h4>
      <h4>CONTACT</h4>
      <p>. . .</p>
    </div>
  </div>


  <!--Second Button-->

  <!-- The Modal -->
  <div id="modal2" class="modal2">

    <!-- Modal content -->
    <div class="modal2-content">
      <span class="close2">&times;</span>
      <h4>TWO</h4>
      <h4>CURRENTLY</h4>
    </div>
  </div>


  <!--Third Button-->

  <!-- The Modal -->
  <div id="modal3" class="modal3">

  <!-- Modal content -->
    <div class="modal3-content">
      <span class="close3">&times;</span>
        <h4>THREE</h4>
        <h4>EDUCATION</h4>
      </div>
  </div>

JS:

<script>
// Get the modal
var modal = document.getElementById("modal1");

// Get the button that opens the modal
var btn = document.getElementById("btn-name");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>


<!--Second Button-->

<script>
// Get the modal
var modal = document.getElementById("modal2");

// Get the button that opens the modal
var btn = document.getElementById("btn-news");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>


<!--Third Button-->

<script>
// Get the modal
var modal = document.getElementById("modal3");

// Get the button that opens the modal
var btn = document.getElementById("btn-cv");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close3")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Я предполагаю, что в этом коде много избыточности. ,,Оптимистично,

JTE

Answer 1

Проблема с вашим кодом в том, что вы объявили var modal и var btn с тем же именем для ваших 3 модальных кнопок и. Использование нескольких <script></script> не означает, что они отделены от других кодов.

Попробуйте объявить с другим именем.

Пример кода:

<script>
// Get the modal
var modal1 = document.getElementById("modal1");

// Get the button that opens the modal
var btn1 = document.getElementById("btn-name");

// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];

// When the user clicks the button, open the modal
btn1.onclick = function() {
  modal1.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
  modal1.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal1) {
    modal1.style.display = "none";
  }
}
</script>


<!--Second Button-->

<script>
// Get the modal
var modal2 = document.getElementById("modal2");

// Get the button that opens the modal
var btn2 = document.getElementById("btn-news");

// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];

// When the user clicks the button, open the modal
btn2.onclick = function() {
  modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
  modal2.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal2) {
    modal2.style.display = "none";
  }
}
</script>


<!--Third Button-->

<script>
// Get the modal
var modal3 = document.getElementById("modal3");

// Get the button that opens the modal
var btn3 = document.getElementById("btn-cv");

// Get the <span> element that closes the modal
var span3 = document.getElementsByClassName("close3")[0];

// When the user clicks the button, open the modal
btn3.onclick = function() {
  modal3.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span3.onclick = function() {
  modal3.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal3) {
    modal3.style.display = "none";
  }
}
</script>

Также, если у вас есть такой код. Просто используйте только один <script></script>.