模态仅在多个按钮上显示最后一个按钮内容

Question

I'm new to coding and am hoping to create three buttons opening three different modals—-so far I've only been about to get the content of the last button to show up for all three (when I comment it out, the second button works for the first two buttons, and when that is commented out, the first works for the first button). I've tried changing the divs to classes to no avail. Any help would be appreciated!

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>

I'm guessing there is a lot of redundancy in this code. . . Optimistically,

JTE

Answer 1

The problem with your code is you declared the var modal and var btn with the same name for your 3 modal and button. Using multiple <script></script> does not mean they are separated from other codes.

Try declared with with different name.

Sample Code:

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

Also if you have this kind of Code. Just use one <script></script> only.