Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1

Status
Not open for further replies.

waubain

Technical User
Dec 13, 2011
200
US
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.

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)'>&#10094;</a>";
                                html += "<a class='next' onclick='plusSlides(1)'>&#10095;</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.
 
Hi

I would try with these changes :
Code:
[b]<script>[/b]
        [b]function[/b] [COLOR=orange]showWx[/color][teal]([/teal]toggle[teal]) {[/teal]
            [b]var[/b] xmlhttp [teal]=[/teal] [b]new[/b] [COLOR=orange]XMLHttpRequest[/color][teal]();[/teal]
            xmlhttp[teal].[/teal]onreadystatechange [teal]=[/teal] [b]function[/b][teal]() {[/teal]
                [b]if[/b] [teal]([/teal][b]this[/b][teal].[/teal]readyState [teal]==[/teal] [purple]4[/purple] [teal]&&[/teal] [b]this[/b][teal].[/teal]status [teal]==[/teal] [purple]200[/purple][teal]) {[/teal]
                    [b]var[/b] arr [teal]=[/teal] JSON[teal].[/teal][COLOR=orange]parse[/color][teal]([/teal][b]this[/b][teal].[/teal]responseText[teal]);[/teal]
                        let html [teal]=[/teal] [i][green]""[/green][/i][teal];[/teal]
                            html [teal]+=[/teal] [i][green]"<div class='container'>"[/green][/i][teal];[/teal]
                            [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal];[/teal] i[teal]<[/teal]arr[teal].[/teal]length[teal];[/teal] i[teal]++) {[/teal]
                                html [teal]+=[/teal] [i][green]"<div class='mySlides'>"[/green][/i][teal];[/teal] 
                                html [teal]+=[/teal] [i][green]"<img src='camgallery/"[/green][/i] [teal]+[/teal] arr[teal][[/teal]i[teal]][[/teal][i][green]'imgname'[/green][/i][teal]] +[/teal] [i][green]"'>"[/green][/i][teal];[/teal]
                                html [teal]+=[/teal] [i][green]"</div>"[/green][/i][teal];[/teal] [gray]//mySlides[/gray]
                            [teal]}[/teal]
                                html [teal]+=[/teal] [i][green]"<a class='prev' onclick='plusSlides(-1)'>&#10094;</a>"[/green][/i][teal];[/teal]
                                html [teal]+=[/teal] [i][green]"<a class='next' onclick='plusSlides(1)'>&#10095;</a>"[/green][/i][teal];[/teal] 
                                html [teal]+=[/teal] [i][green]"</div>"[/green][/i][teal];[/teal]   [gray]//container [/gray]
                                html [teal]+=[/teal] [i][green]"<div class='caption-container'>"[/green][/i][teal];[/teal]
                                html [teal]+=[/teal] [i][green]"<span id='caption'></span>"[/green][/i][teal];[/teal]
                                html [teal]+=[/teal] [i][green]"</div>"[/green][/i][teal];[/teal] [gray]//caption-container[/gray]
                                html [teal]+=[/teal] [i][green]"<div class='img-row'>"[/green][/i][teal];[/teal]
                            [b]for[/b] [teal]([/teal][b]var[/b] i [teal]=[/teal] [purple]0[/purple][teal];[/teal] i[teal]<[/teal]arr[teal].[/teal]length[teal];[/teal] i[teal]++) {[/teal]
                                html [teal]+=[/teal] [i][green]"<div class='img-column'>"[/green][/i][teal];[/teal]
                                html [teal]+=[/teal] [i][green]"<img class='demo cursor' src='camgallery/"[/green][/i] [teal]+[/teal] arr[teal][[/teal]i[teal]][[/teal][i][green]'imgname'[/green][/i][teal]] +[/teal] [i][green]"' style='width:100%' alt='"[/green][/i] [teal]+[/teal] arr[teal][[/teal]i[teal]][[/teal][i][green]'imgdate'[/green][/i][teal]] +[/teal] [i][green]"'>"[/green][/i][teal];[/teal]
                                html [teal]+=[/teal] [i][green]"</div>"[/green][/i][teal];[/teal] [gray]//column[/gray]
                                [teal]}[/teal]
                                html [teal]+=[/teal] [i][green]"</div>"[/green][/i] [gray]//row[/gray]
                        document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]"cam_images"[/green][/i][teal]).[/teal]innerHTML [teal]=[/teal] html[teal];[/teal]
                [teal]}[/teal]

                [highlight]slideIndex [teal]=[/teal] [purple]1[/purple][teal];[/teal] [gray]// just initialize here, not declare[/gray][/highlight]
                [highlight][COLOR=orange]showSlides[/color][teal]([/teal]slideIndex[teal]);[/teal] [gray]// call here[/gray][/highlight]
            [teal]};[/teal]
            [b]if[/b] [teal]([/teal]toggle [teal]===[/teal] [i][green]'day'[/green][/i][teal]) {[/teal]
                [b]var[/b] url[teal]=[/teal][i][green]"get_images_day.php"[/green][/i][teal];[/teal] 
            [teal]}[/teal]
            [b]else if[/b] [teal]([/teal]toggle [teal]===[/teal] [i][green]'month'[/green][/i][teal]) {[/teal]
                [b]var[/b] url[teal]=[/teal][i][green]"get_images_month.php"[/green][/i][teal];[/teal]
            [teal]}[/teal]
            xmlhttp[teal].[/teal][COLOR=orange]open[/color][teal]([/teal][i][green]"GET"[/green][/i][teal],[/teal]url[teal],[/teal][b]true[/b][teal]);[/teal] 
            xmlhttp[teal].[/teal][COLOR=orange]setRequestHeader[/color][teal]([/teal][i][green]"Content-type"[/green][/i][teal],[/teal][i][green]"application/json"[/green][/i][teal]);[/teal]
            xmlhttp[teal].[/teal][COLOR=orange]send[/color][teal]();[/teal]
        [teal]}[/teal]
    [b]</script>[/b]
    [b]<script>[/b]
            [highlight][b]var[/b] slideIndex[teal];[/teal] [gray]// keep declaration here[/gray][/highlight]
            [highlight][gray]// showSlides(slideIndex); // call moved from here[/gray][/highlight]

        [gray]// Next/previous controls[/gray]
        [b]function[/b] [COLOR=orange]plusSlides[/color][teal]([/teal]n[teal]) {[/teal]
            [COLOR=orange]showSlides[/color][teal]([/teal]slideIndex [teal]+=[/teal] n[teal]);[/teal]
        [teal]}[/teal]

        [gray]// Thumbnail image controls[/gray]
        [b]function[/b] [COLOR=orange]currentSlide[/color][teal]([/teal]n[teal]) {[/teal]
            [COLOR=orange]showSlides[/color][teal]([/teal]slideIndex [teal]=[/teal] n[teal]);[/teal]
        [teal]}[/teal]

        [b]function[/b] [COLOR=orange]showSlides[/color][teal]([/teal]n[teal]) {[/teal]
          [b]var[/b] i[teal];[/teal]
          [b]var[/b] slides [teal]=[/teal] document[teal].[/teal][COLOR=orange]getElementsByClassName[/color][teal]([/teal][i][green]"mySlides"[/green][/i][teal]);[/teal]
          [b]var[/b] dots [teal]=[/teal] document[teal].[/teal][COLOR=orange]getElementsByClassName[/color][teal]([/teal][i][green]"demo"[/green][/i][teal]);[/teal]
          [b]var[/b] captionText [teal]=[/teal] document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]"caption"[/green][/i][teal]);[/teal]
          [b]if[/b] [teal]([/teal]n [teal]>[/teal] slides[teal].[/teal]length[teal]) {[/teal]slideIndex [teal]=[/teal] [purple]1[/purple][teal];}[/teal]
          [b]if[/b] [teal]([/teal]n [teal]<[/teal] [purple]1[/purple][teal]) {[/teal]slideIndex [teal]=[/teal] slides[teal].[/teal]length[teal];}[/teal]
          [b]for[/b] [teal]([/teal]i [teal]=[/teal] [purple]0[/purple][teal];[/teal] i [teal]<[/teal] slides[teal].[/teal]length[teal];[/teal] i[teal]++) {[/teal]
              slides[teal][[/teal]i[teal]].[/teal]style[teal].[/teal]display [teal]=[/teal] [i][green]"none"[/green][/i][teal];[/teal]
          [teal]}[/teal]
          [b]for[/b] [teal]([/teal]i [teal]=[/teal] [purple]0[/purple][teal];[/teal] i [teal]<[/teal] dots[teal].[/teal]length[teal];[/teal] i[teal]++) {[/teal]
              dots[teal][[/teal]i[teal]].[/teal]className [teal]=[/teal] dots[teal][[/teal]i[teal]].[/teal]className[teal].[/teal][COLOR=orange]replace[/color][teal]([/teal][i][green]" active"[/green][/i][teal],[/teal] [i][green]""[/green][/i][teal]);[/teal]
          [teal]}[/teal]
          slides[teal][[/teal]slideIndex[teal]-[/teal][purple]1[/purple][teal]].[/teal]style[teal].[/teal]display [teal]=[/teal] [i][green]"block"[/green][/i][teal];[/teal]
          dots[teal][[/teal]slideIndex[teal]-[/teal][purple]1[/purple][teal]].[/teal]className [teal]+=[/teal] [i][green]" active"[/green][/i][teal];[/teal]
          captionText[teal].[/teal]innerHTML [teal]=[/teal] dots[teal][[/teal]slideIndex[teal]-[/teal][purple]1[/purple][teal]].[/teal]alt[teal];[/teal]
        [teal]}[/teal]
    [b]</script>[/b]


Feherke.
feherke.github.io
 
Feherke, thank you for the suggestions. It works as requested.

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top