Multiple Scripts on same HTML page for rotating banner

Question

Trying to make a kind of auto rotating banner for content in a footer. The issue is that whilst they update the slide, the first two stop after changing once, and the third updates faster than it should be doing. Each of the parts have unique class names, and I can't seem to find the problem. I believe the issue is either in the HTML or the JS scripts, however this is really the first time ive used multiple scripts on one page. (This is for a project) HTML

<footer>
      <div class = "grid-container" id = "footer-grid">
        <div class = "grid-100 mobile-grid-100 grid-parent" id = "slideshow">
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 1</h1>
          </div>
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 2</h1>
          </div>
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 3</h1>
          </div>
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 4</h1>
          </div>
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 5</h1>
          </div>

          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 1</h1>
          </div>
          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 2</h1>
          </div>
          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 3</h1>
          </div>
          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 4</h1>
          </div>
          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 5</h1>
          </div>

          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 1</h1>
          </div>
          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 2</h1>
          </div>
          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 3</h1>
          </div>
          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 4</h1>
          </div>
          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 5</h1>
          </div>
        </div>
        <div class = "clear"></div>
        <div class = "clear"></div>
        <div class = "grid-100" id = "footer-info">
          <p>some stuff might go here</p>
        </div>
      </div>
    </footer>

    <!-- SCRIPTS -->
    <script>
     var slideIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("Slide1");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > x.length) {slideIndex = 1}
      x[slideIndex-1].style.display = "block";
      setTimeout(carousel, 1000); // Change image every 2 seconds
    }
    </script>
    <script>
     var slideIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("Slide");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > x.length) {slideIndex = 1}
      x[slideIndex-1].style.display = "block";
      setTimeout(carousel, 1000); // Change image every 2 seconds
    }
    </script>
    <script>
     var slideIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides3");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > x.length) {slideIndex = 1}
      x[slideIndex-1].style.display = "block";
      setTimeout(carousel, 1000); // Change image every 2 seconds
    }
    </script>

CSS

Slide1, .Slide, .mySlides3 {
    display: none;
    border: 1px solid black;
    text-align: center;
    padding-top:10px;
    margin-bottom:10px;
    }

Any help is appreciated, this is the only real issue i've had using javascript at this point. I can't seem to find why this is occurring, I have tried changing class names to be more distinct.

Answer 1

When you create a new function in global scope you are basically doing the following:

window.carousel = function () { ... }

You have 3 scripts parts. When first is executed, it rotates the first element. But after that, it's overwritten by second script block. So your code is something like this currently:

window.carousel = function () { /* logic for elm 1 */ }
window.carousel()
window.carousel = function () { /* logic for elm 2 */ }
window.carousel()
window.carousel = function () { /* logic for elm 3 */ }
window.carousel()

In short, 3 script tags share one scope, hence your problem. Solution might be creating a carousel function which will take id as an argument. And this is better coding practice anyways

Answer 2

You can consolidate your javascript right now and make this much easier on yourself. You should only need 1 carousel function for all of your calls. The only things that changes between each carousel function call is the class name. So add that as a parameter for your carousel function.

    <!-- SCRIPTS -->
    <script>
        var slideIndex = 0;
        carousel("Slide1"); 
        carousel("Slide");  
        carousel("mySlides3");

        function carousel(slideName) {
            var i;
            var x = document.getElementsByClassName(slideName);
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > x.length) {
                slideIndex = 1
            }
            x[slideIndex - 1].style.display = "block";
            setTimeout(function() { carousel(slideName) }, 1000); // Change image every 2 seconds 
        }
    </script>

PS... You are missing a "." on Slide1 in your css as well.