为不同的模态获取相同的图像

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";
  }
}

Answer 2

Although @Halmon fixed you specific issue, i think you should not repeat complete lines of code to do the same thing.

Generic demo can be something like that (i put notes inside):

 // this is your modal let modalCon = document.querySelector('#myModal'); // this is an array of images src. it may be helpful if you have more then 2 images. let chosen = [ 'https://bbk12e1-cdn.myschoolcdn.com/772/photo/2015/06/orig_photo275070_2980857.jpg', 'https://bbk12e1-cdn.myschoolcdn.com/ftpimages/772/misc/misc_190683.123dx' ]; // since the number of buttons that will trigger the modal // is the same as the array indexes you can simply: // a. add event listener when a button clicked document.querySelectorAll('#modalTrig button').forEach((btn,i) => btn.addEventListener('click',()=> { // b. set the src of modal's image document.querySelector('#myModal img').setAttribute('src', chosen[i]); // c. show the modal modalCon.classList.add('show'); })); // this will close the modal document.querySelector('#close').addEventListener('click', () => { modalCon.classList.remove('show'); });

 /* just for demo */ #myModal { width: 85%; max-width: 600px; margin: auto; opacity: 0; transition: 1s ease-in-out; } #myModal img {max-width: 100%; height: auto;} #myModal.show { opacity: 1;}

 <nav id="modalTrig"> <button>1</button> <button>2</button> </nav> <aside id="myModal" class="modal"><!-- Modal content --> <button id="close">&#215;</button> <figure class="modal-content"> <img id="img" /> <figcaption>This is the Galbraith Building</figcaption> </figure> </aside>

PS - although learning from examples can be quicker you should learn the basics before. Start here .