I am using the framework from this Link with changes to make it more dynamic. I display outside cam images on my weather page. There is a toggle button between Day and Month images.
When the page loads I am getting an Uncaught "TypeError: slides[(slideIndex - 1)] is undefined". If either the next or previous button is clicked then everything works. I understand enough to know why it is doing this, but it is unclear how to fix it. Here is a link to the Test Page.
I understand ShowSlides is loaded before the HTML so "slides." is empty. What I cannot figure out is how to run it after the html/images loaded. Adding an if slide.length > 0 then run it removed the error, but then the first slide still did not load.
Thank you.
When the page loads I am getting an Uncaught "TypeError: slides[(slideIndex - 1)] is undefined". If either the next or previous button is clicked then everything works. I understand enough to know why it is doing this, but it is unclear how to fix it. Here is a link to the Test Page.
HTML:
<body onload="showWx('day')">
<div id="cam_images"></div>
<scripts>...
</body>I understand ShowSlides is loaded before the HTML so "slides." is empty. What I cannot figure out is how to run it after the html/images loaded. Adding an if slide.length > 0 then run it removed the error, but then the first slide still did not load.
Code:
<script>
function showWx(toggle) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var arr = JSON.parse(this.responseText);
let html = "";
html += "<div class='container'>";
for (var i=0; i<arr.length; i++) {
html += "<div class='mySlides'>";
html += "<img src='camgallery/" + arr[i]['imgname'] + "'>";
html += "</div>"; //mySlides
}
html += "<a class='prev' onclick='plusSlides(-1)'>❮</a>";
html += "<a class='next' onclick='plusSlides(1)'>❯</a>";
html += "</div>"; //container
html += "<div class='caption-container'>";
html += "<span id='caption'></span>";
html += "</div>"; //caption-container
html += "<div class='img-row'>";
for (var i = 0; i<arr.length; i++) {
html += "<div class='img-column'>";
html += "<img class='demo cursor' src='camgallery/" + arr[i]['imgname'] + "' style='width:100%' alt='" + arr[i]['imgdate'] + "'>";
html += "</div>"; //column
}
html += "</div>" //row
document.getElementById("cam_images").innerHTML = html;
}
};
if (toggle === 'day') {
var url="get_images_day.php";
}
else if (toggle === 'month') {
var url="get_images_month.php";
}
xmlhttp.open("GET",url,true);
xmlhttp.setRequestHeader("Content-type","application/json");
xmlhttp.send();
}
</script>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1;}
if (n < 1) {slideIndex = slides.length;}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>Thank you.