Getting same image for different modals

Question

I'm having trouble getting the same image in my modals even though I have different classes on them...I'm sure it's my JS code, just can't figure it out....any help is much appreciated.

I'm still learning JS, but know just enough to be dangerous! I'm sure this is not the best way to code, but I took the basics from W3schools and adjusted it to my needs.

At first only one modal would work, but I figured out how to make the code more detailed, now I just get the same pic.

How do I make sure it picks the right one?

Here is my code:

// Get the modal
var modal = document.getElementById("myModal");

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[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";
  }
}

// Get the modal
var modal2 = document.getElementById("myModal2");

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

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

<button id="myBtn">1</button> <!-- The Modal -->
<div id="myModal" class="modal"><!-- Modal content -->
  <div class="modal-content">
    <img class="img" src="https://bbk12e1-cdn.myschoolcdn.com/ftpimages/772/misc/misc_190683.123dx" /> 
    <span class="close">&#215;</span>
    <div>This is the Galbraith Building</div>
 </div>
</div>

<button id="myBtn2">2</button> <!-- The Modal -->
<div id="myModal2" class="modal2"><!-- Modal content -->
  <div class="modal-content2">
    <img class="img2" src="https://bbk12e1-cdn.myschoolcdn.com/772/photo/2015/06/orig_photo275070_2980857.jpg" /> 
    <span class="close2">&#215;</span>
  <div>This is the Galbraith Building</div>
</div>

Answer 1

You're calling the first modal for both functions. Change the 2nd set to modal2.style.display and it should fix your issue

// Get the modal
var modal = document.getElementById("myModal");

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[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";
  }
}

// Get the modal
var modal2 = document.getElementById("myModal2");

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

// 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() {
  modal2.style.display = "block";
}

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

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