Trying to work with three sets of JavaScript in the same page

[JahCriss]

Hello all,

Im trying to work with different sets of JavaScript functions in order to make three groups of slide show in the same page. Im on my way to understand better JavaScript but, by now, I'd be glad if I could fix this problem:

When I try to run the script for a indicator slideshow, the other ones stops to work...

And Im using the script functions displayed in your "try yourself area"...

Am I doing something really wrong?...

So here's the codes:

For the slide show indicator:

var slideIndex = 1;

showDivs(slideIndex);

 

function currentDiv(n) {

showDivs(slideIndex = n);

}

 

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("demo");

if (n > x.length) {

slideIndex = 1

}

if (n < 1) {

slideIndex = x.length

}

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" w3-opacity-off", "");

}

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

dots[slideIndex - 1].className += " w3-opacity-off";

}

 

and for the "bullet slide":

 

var slideIndex = 1;

showDivs(slideIndex);

 

function plusDivs(n) {

showDivs(slideIndex += n);

}

 

function currentDiv(n) {

showDivs(slideIndex = n);

}

 

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("demo");

if (n > x.length) {

slideIndex = 1

}

if (n < 1) {

slideIndex = x.length

}

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" w3-white", "");

}

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

dots[slideIndex - 1].className += " w3-white";

}

 

Thanks for any help!