Making slideshow using W3Schools example gives error

DougP · Aug 22, 2017

this is the example on W3Schools:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

Here is my WEB page on my side which does not work correctly:

http://www.doogiestoyshop.com/Cool Crafts.aspx

this is the error I get; which is highlighted in my code near the bottom in yellow.
Unhandled exception at line 157, column 17 in

http://localhost:52872/Cool

Crafts.aspx
0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference
-------
I am using Visual Studio to create the site. I am verse VS.VB and like the IDE plus, I know how to connect to SQL using it and so on.
Any ideas like what I am missing?
here is my code:

Code:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Cool Crafts.aspx.vb" Inherits="Cool_Crafts" %>

<!DOCTYPE html>

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head runat="server">
    <meta charset ="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content ="Handmade Toys for all ages, Made in Central Florida, U.S.A." />
    <meta name="keywords" content ="Candy Cane Snowman, Home of the original Giant 4ft Pencils, Pencils with your letters, words or saying." />
    <meta name="author" content ="Doogie" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DoogiesToyShop/Cool Crafts and Projects</title>
    <link rel="stylesheet" href="./css/StyleSheet.css" />
    
    <style type="text/css">
        .auto-style1 {
            width: 200px;
            height: 144px;
        }
        * {box-sizing:border-box}
            body {font-family: Verdana,sans-serif;margin:0}
            .mySlides {display:none}

            /* Slideshow container */
            .slideshow-container {
              max-width: 1000px;
              position: relative;
              margin: auto;
            }

            /* Next & previous buttons */
            .prev, .next {
              cursor: pointer;
              position: absolute;
              top: 50%;
              width: auto;
              padding: 16px;
              margin-top: -22px;
              color: white;
              font-weight: bold;
              font-size: 18px;
              transition: 0.6s ease;
              border-radius: 0 3px 3px 0;
            }

            /* Position the "next button" to the right */
            .next {
              right: 0;
              border-radius: 3px 0 0 3px;
            }

            /* On hover, add a black background color with a little bit see-through */
            .prev:hover, .next:hover {
              background-color: rgba(0,0,0,0.8);
            }

            /* Caption text */
            .text {
              color: #f2f2f2;
              font-size: 15px;
              padding: 8px 12px;
              position: absolute;
              bottom: 8px;
              width: 100%;
              text-align: center;
            }

            /* Number text (1/3 etc) */
            .numbertext {
              color: #f2f2f2;
              font-size: 12px;
              padding: 8px 12px;
              position: absolute;
              top: 0;
            }

            /* The dots/bullets/indicators */
            .dot {
              cursor:pointer;
              height: 13px;
              width: 13px;
              margin: 0 2px;
              background-color: #bbb;
              border-radius: 50%;
              display: inline-block;
              transition: background-color 0.6s ease;
            }

            .active, .dot:hover {
              background-color: #717171;
            }

            /* Fading animation */
            .fade {
              -webkit-animation-name: fade;
              -webkit-animation-duration: 1.5s;
              animation-name: fade;
              animation-duration: 1.5s;
            }

            @-webkit-keyframes fade {
              from {opacity: .4} 
              to {opacity: 1}
            }

            @keyframes fade {
              from {opacity: .4} 
              to {opacity: 1}
            }

            /* On smaller screens, decrease text size */
            @media only screen and (max-width: 300px) {
              .prev, .next,.text {font-size: 11px}
            }
    </style>
    
</head>
    <body>
        <header> 
            <div class="container80percent">
                <div id="branding">
                    <h1><span class="highlight">Doogies</span>ToyShop.com</h1>
                </div>
                <nav>
                    <ul>
                        <li class="current"><a href="default.aspx">Home</a></li>
                        <li><a href="about.aspx">About</a></li>
                        <li><a href="Pencils.aspx">Giant Pencils</a></li>
                        <li><a href="Holidays.aspx">Holidays</a></li>
                        <li><a href="Cool Crafts.aspx">Cool Crafts</a></li>
                    </ul>
                </nav>
     
            </div>
        </header>

        <script>
            var slideIndex = 1;
            showSlides(slideIndex);

            function plusSlides(n) {
                showSlides(slideIndex += n);
            }

            function currentSlide(n) {
                showSlides(slideIndex = n);
            }

            function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                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", "");
                }
               [highlight #FCE94F] slides[slideIndex - 1].style.display = "block";
[/highlight]                dots[slideIndex - 1].className += " active";
            }
        </script>
    
    <section id="showcase">
        <div class="container50percent">
            <h1>
                <img alt="" class="auto-style1" src="images/Under%20Construction.jpg" />Cools Crafts and Projects</h1>
            <h3>I made all of the following items over the years.</h3>
            <div>
                <div class="slideshow-container">
                    <div class="mySlides fade">
                      <div class="numbertext">1 / 3</div>
                      <img src="images/CoolCraftsSlideShow/suntable/Mvc-839s.jpg" style ="width:50%" />
                      <div class="text">Caption Text</div>
                    </div>

                    <div class="mySlides fade">
                      <div class="numbertext">2 / 3</div>
                      <img src="images/CoolCraftsSlideShow/suntable/Mvc-842s.jpg" style ="width:50%" />
                      <div class="text">Caption Two</div>
                    </div>

                    <div class="mySlides fade">
                      <div class="numbertext">3 / 3</div>
                      <img src="images/CoolCraftsSlideShow/suntable/Mvc-843s.jpg" style ="width:50%" />
                      <div class="text">Caption Three</div>
                    </div>

                    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                    <a class="next" onclick="plusSlides(1)">&#10095;</a>

                </div>
                    
                <br />

                <div style="text-align:center">
                    <span class="dot" onclick="currentSlide(1)"></span> 
                    <span class="dot" onclick="currentSlide(2)"></span> 
                    <span class="dot" onclick="currentSlide(3)"></span> 
                </div>
            </div>
        </div>
    </section>
        
    <footer>
        <p>
            <img src="images/palm%20tree%20and%20sunset%20right.jpg" width="45"/>
            Doogies Toy Shop Copyright &copy;
            <script type="text/javascript">
                document.write(new Date().getFullYear());
            </script>
            <img src="images/palm%20tree%20and%20sunset%20left.jpg" width="45"/>
        </p>
    </footer>


</body>
</html>

DougP

ChrisHirst · Aug 22, 2017

Probably because if the slideshow is already at index 0 "slides[slideIndex - 1" will not even exist.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

DougP · Aug 22, 2017

Ok, any ideas how to fix it?
it work on the W3C site just as is, what is different about that?
I copied the code from the "try this" page since the code form the front did not work however both give the same error?

DougP

ChrisHirst · Aug 22, 2017

By the way, W3Schools is NOT the W3C.

Ok, any ideas how to fix it?

Check for slide index being 0 before you try to decrement it

{quote]it work on the W3C site just as is, what is different about that?[/quote]

No idea, as we do not have the actual code on your page to check against..

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

DougP · Aug 22, 2017

There is a link at the top of the page to show the W3Schools code I copied?
Sorry Brain of a 60 year geezer! LOL

DougP

DougP · Aug 23, 2017

I made a blank HTML page and copied and pasted the code from w3Schools and it works just fine.
So for some reason it will not work when added into an .aspx page.

http://www.doogiestoyshop.com/testslideshow.html

<test HTML page

DougP

vacunita · Aug 23, 2017

It's not really the ASP that´s affecting it.

The first thing when trying to figure out why something throws an error is to understand what it is doing. And checking that what its doing is correct at every step.

A simple alert(), can help you debug the JS. Basically if you alert your slides variable as it is, you will notice it is empty. The getElementsByClassName returns an empty collection of html objects. So when you try to assign a value to the display property it cannot because there are no elements to assign it to. Since the slides variable is empty, slides[slideIndex-1] returns a non existent or null element.

Now why is this happening?

Note where the JS code is placed in the W3Schools example, and where you have it.

As a hint, webpages load in order of code placement, and JS is run, when outside of a function, in the order it is found in the html code.

This is a prime example of why just trying to throw code into a webpage without understanding what its doing, will very seldom work. Try to understand what the Javascript is doing, and you'll realize why its not working.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

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!

Making slideshow using W3Schools example gives error

DougP

MIS

ChrisHirst

IS-IT--Management

DougP

MIS

ChrisHirst

IS-IT--Management

DougP

MIS

DougP

MIS

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor