1

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);
fmcgarry
  • 92
  • 2
  • 9
E_A
  • 121
  • 1
  • 11
  • 1
    Maybe a duplicate. Check this one out https://stackoverflow.com/questions/44465787/can-javascript-run-multiple-functions-at-once – Armedin Kuka Nov 26 '19 at 14:28
  • `showSlides()` will only start to run after `showSlides1()` finish it's execution... have you checked console to see if no errors occured in `showSlides1()`? – Calvin Nunes Nov 26 '19 at 14:29
  • 5
    What's the point of having two functions doing the same thing? You can pass the classname as a parameter too and use one function, call it twice one after another... – Goran Stoyanov Nov 26 '19 at 14:29
  • 1
    `document.getElementsByClassName("dot");` you are selecting all the dots on the page, that is what is wrong. You should be selecting the ones inside the element you are working on. But without HTML, it is a guess on the fix. – epascarello Nov 26 '19 at 14:32
  • @epascarello i am not using the dots again – E_A Nov 26 '19 at 14:36
  • @GoranStoyanov the same thing is happening, I am trying to echo stuff out on the screen with PHP whiles using the JavaScript code to display what i am echoing – E_A Nov 26 '19 at 14:39
  • 1
    @EyoAkak wanna bet a taco you are? You are selecting the same elements in both methods. So First method selects all the dot elements on the page and loops over the first few of them. The Second method selects all the dot elements on the page and loops over the first few of them. They are not selecting the dots for their widget. – epascarello Nov 26 '19 at 14:43
  • 1
    Problem is I can not help you get an answer since I have no idea how the slides and the dots are related to each other. If you showed the html, you would have had an answer. – epascarello Nov 26 '19 at 14:49
  • @epascarello sorry my bad you are correct!!!!!. thanks a lot I almost started crying, the dots were the problem, I was selecting all the dots, although I wasn't using them, there were still there. thanks – E_A Nov 26 '19 at 14:56
  • The code could be improved a lot. – epascarello Nov 26 '19 at 14:57

2 Answers2

2

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>
Goran Stoyanov
  • 2,311
  • 1
  • 21
  • 31
Andreew4x4
  • 469
  • 4
  • 18
0
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.

E_A
  • 121
  • 1
  • 11
  • 1
    While this might answer the question, a little explanation could improve the answer's long term value. – jrook Nov 26 '19 at 19:33