Loading different content to modal box with one JavaScript file

Question

I am trying to use one javascript file to open a modal box with different content depending on what is clicked. One modal box works great, the other ones load the correct text, but not any pictures. If I take out the div class mySlides fade and just add pictures to the modal box, it works fine. I am sure it something simple I am overlooking.

// Get the modal
let modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
let btn = document.getElementsByClassName('text');

// Get the  element that closes the modal
let span = document.getElementsByClassName("close");



// When the user click on the button, open the modal
for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function() {
    modal[i].style.display = "flex";
  }
}

for (let i = 0; i < span.length; i++) {
  span[i].onclick = function() {
    modal[i].style.display = "none";
  }
}

let slideIndex = 1;

// Next/previous controls
function plusSlides(n) {
  showSlide(slideIndex = n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlide(slideIndex = n);
}

function showSlide(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

showSlide(slideIndex);




  
    
      
      
        1 / 3
        
      
      
        2 / 3
        
      
      
        3 / 3
        
      
      
      ❮
      ❯
    
    

    
    
      
      
      
    
    MyRegister App
    This app simulates a checkbook register. Add deposits and withdraws.
    
    ×
    Source Code



  
  
  
  
    
      
        
        
          1 / 3
          
        
        
          2 / 3
          
        
        
          3 / 3
          
        
        
        ❮
        ❯
      
      

      
      
        
        
        
      
      Practice Test App
      This is a practice test application I made for work.
      ×
      Source Code

Adnan Sharif · Accepted Answer

As there is no picture attached. I can't see is the picture is changing or not.
After reading your code, I understand that you are changing your slides from this html code.


❮
❯

But in your code, you are not adding the value that you are sending to plusSlides() function.

So, you need to make changes to your plusSlides() function like the following:

function plusSlides(n) {
  showSlide(slideIndex += n);
}

That's it! Your problem is solved!!!

BUT

There's Still Some Problem Exist!

You may notice that you're back button is not working as expected. That's because you have total 6 div elements with same class name! so, here, slides.length actually returns 6. So, you may pass another indicator to your function from your html. And you should put separate slideIndex variable for keeping count of each event.

I have tried to edit your javascript.

Here is the full live code:

// Get the modal
let modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
let btn = document.getElementsByClassName('text');

// Get the  element that closes the modal
let span = document.getElementsByClassName("close");



// When the user click on the button, open the modal
for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function() {
    modal[i].style.display = "flex";
  }
}

for (let i = 0; i < span.length; i++) {
  span[i].onclick = function() {
    modal[i].style.display = "none";
  }
}

let slideIndex = [1, 4];
let slides = document.getElementsByClassName("mySlides"),
  dots = document.getElementsByClassName("dot");

// Next/previous controls
function plusSlides(counter, index) {
  showSlide((slideIndex[index] + counter), index);
}

// Thumbnail image controls
function currentSlide(position, index) {
  showSlide(position, index);
}

function showSlide(position, index) {
  let lastPostion = index * 3 + 3,
    firstPosition = index * 3 + 1;

  if (position > lastPostion) {
    position = firstPosition;
  }
  if (position < firstPosition) {
    position = lastPostion;
  }
  slides[slideIndex[index] - 1].style.display = "none";
  dots[slideIndex[index] - 1].className = dots[slideIndex[index] - 1].className.replace(" active", "");

  slides[position - 1].style.display = "block";
  dots[position - 1].className += " active";

  slideIndex[index] = position;
}

function initSlide() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  for (var i = 0; i < slides.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[0].style.display = "block";
  dots[0].className += " active";
  slides[3].style.display = "block";
  dots[3].className += " active";
}
initSlide();




  
    
      
      
        1 / 3
        
      
      
        2 / 3
        
      
      
        3 / 3
        
      
      
      ❮
      ❯
    
    

    
    
      
      
      
    
    MyRegister App
    This app simulates a checkbook register. Add deposits and withdraws.
    
    ×
    Source Code



  
  
  
  
    
      
        
        
          1 / 3
          
        
        
          2 / 3
          
        
        
          3 / 3
          
        
        
        ❮
        ❯
      
      

      
      
        
        
        
      
      Practice Test App
      This is a practice test application I made for work.
      ×
      Source Code

Hope, this will help your!

Loading different content to modal box with one JavaScript file

Answers (1)

BUT

Related Questions