Automatic slideahow

Question

Ive been working on this for a while now and I can't seem to get the javascript to fire the for loop to work. I've been using w3Schools as reference and Been doing a lot of research and still cam up empty. Please if anyone has any insight or an alternative way please let me know.

The aspx side

<style>
        .mySlides {
            display: none;
        }
</style>

<script>
        var myIndex = 0;
        carousel();

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

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="content section" style="max-width: 100%;">
                    <img class="mySlides" src="img/personel.png" style="width: 100%; height: 800px" />
                    <img class="mySlides" src="img/integration.png" style="width: 100%; height: 800px" />
                    <img class="mySlides" src="img/tech_background.png" style="width: 100%; height: 800px" />
                </div>
            </div>
        </div>

CSS

.content {
    max-width: 980px
}

.section, .code {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}
.code, .codespan {
    font-family: Consolas,"courier new";
    font-size: 16px
}

.code {
    width: auto;
    background-color: #fff;
    padding: 8px 12px;
    border-left: 4px solid #4CAF50;
    word-wrap: break-word
}

.codespan {
    color: crimson;
    background-color: #f1f1f1;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 110%
}

Your `` block must be moved *after* the carousel HTML otherwise it will be executed before the elements you are trying to select are loaded into the DOM — secan, Feb 04 '21 at 08:14
@MadelineKallis In the future, keep an eye out for errors in the console of your browser. It should show you an error "_Uncaught TypeError: Cannot read property 'style' of undefined_". Even if it doesn't help you, it can be useful for those trying to answer your question. — Ivar, Feb 04 '21 at 08:29

score 1 · Accepted Answer · answered Feb 04 '21 at 08:19

As mentioned in the comment, you simply have to move your <script></script> block after the slideshow HTML (usually you place it at the very end of the body, right before the closing </body>) so that it is executed after the elements you are trying to select are loaded into the DOM:

.content {
  max-width: 980px
}

.section,
.code {
  margin-top: 16px !important;
  margin-bottom: 16px !important
}

.code,
.codespan {
  font-family: Consolas, "courier new";
  font-size: 16px
}

.code {
  width: auto;
  background-color: #fff;
  padding: 8px 12px;
  border-left: 4px solid #4CAF50;
  word-wrap: break-word
}

.codespan {
  color: crimson;
  background-color: #f1f1f1;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 110%
}

<style>
  .mySlides {
    display: none;
  }
</style>

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="content section" style="max-width: 100%;">
      <img class="mySlides" alt="personel" src="img/personel.png" style="width: 100%; height: 800px" />
      <img class="mySlides" alt="integration" src="img/integration.png" style="width: 100%; height: 800px" />
      <img class="mySlides" alt="tech_background" src="img/tech_background.png" style="width: 100%; height: 800px" />
    </div>
  </div>
</div>

<script>
  var myIndex = 0;
  carousel();

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

Automatic slideahow

1 Answers1