CODEWITHSUNDEEP
javascripthtmlcss
E_A
E_A

Reputation: 131

How to call two functions at a time in JavaScript?

I have these two functions that have very similar code and almost the same variable names. I want to run the both of them, but only one is running.

Here are the functions:

function showSlides(n) {
  var i;

  var slides = document.getElementsByClassName("mySlides0");

  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = slides.length}    
  if (n < 1) {slideIndex = 1}
  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";

    }


    ////////////////////////
    function showSlides1(n) {
    var i;

  var slides = document.getElementsByClassName("mySlides1");

  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = slides.length}    
  if (n < 1) {slideIndex = 1}
  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";

}

and here is how I ran it:

showSlides1(slideIndex1);
showSlides(slideIndex);

Upvotes: 1

Views: 251

Answers (2)

Andreew4x4
Andreew4x4

Reputation: 489

First of all, as mentioned in the comments, you don't need the same function, just with different className, you can pass it by argument.

Second thing is that you forgot to assign your n argument to slideIndex. The third thing is you searched for all dots in the document. You should search only for those in your slider.

I've prepared a working example for your code with some HTML and CSS included. 

function showSlides(n, className) {
  var i;

	var slider = document.getElementsByClassName(className)[0];
  var slides = slider.getElementsByClassName('slide');
  var dots = slider.getElementsByClassName("dot");
  var slideIndex = 0;
  
  if (n > slides.length) {slideIndex = slides.length}    
  else if (n < 1) {slideIndex = 1}
  else {slideIndex = n}
  
  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";

    }


showSlides(2, 'first-slider');
showSlides(3, 'second-slider');
.first-slider,
.second-slider {
  display: inline-block;
  width: 100px;
}
.slide {
  color: blue;
}

.dot {
  display: inline-block;
  padding: 3px 4px;
  border-radius: 50%;
  background: grey;
}
.dot.active {
  color: red;
}
<div class="first-slider">
  <div class="slide">
     1
  </div>
  <div class="slide">
     2
  </div>
  <div class="slide">
     3
  </div>
  <div class="slide">
     4
  </div>
  <div class="slide">
     5
  </div>
  <div class="dots">
    <div class="dot">
    1
    </div>
    <div class="dot">
    2
    </div>
    <div class="dot">
    3
    </div>
    <div class="dot">
    4
    </div>
     <div class="dot">
    5
    </div>
    
  </div>
</div>
<div class="second-slider">
  <div class="slide">
     1
  </div>
  <div class="slide">
     2
  </div>
  <div class="slide">
     3
  </div>
  <div class="slide">
     4
  </div>
  <div class="slide">
     5
  </div>
  <div class="dots">
    <div class="dot">
    1
    </div>
    <div class="dot">
    2
    </div>
    <div class="dot">
    3
    </div>
    <div class="dot">
    4
    </div>
     <div class="dot">
    5
    </div>
    
  </div>
</div>

Upvotes: 2

E_A
E_A

Reputation: 131

function showSlides(n) {
  var i;

  var slides = document.getElementsByClassName("mySlides0");

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

  slides[slideIndex-1].style.display = "block";  


    }
    ///////////////////////////////////////////
function showSlides1(n) {
  var i;

  var slides = document.getElementsByClassName("mySlides1");

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

  slides[slideIndex-1].style.display = "block";  


    }

then call it normally

showSlides(slideIndex);

showSlides1(slideIndex)

this is the correct code @epascarello thanks.

Upvotes: 0

Related Questions