Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.


Making slideshow using W3Schools example gives error

Making slideshow using W3Schools example gives error

this is the example on W3Schools:

Here is my WEB page on my side which does not work correctly:
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:


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

<!DOCTYPE html>

<html xmlns="">

<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 {
              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}
            <div class="container80percent">
                <div id="branding">
                    <h1><span class="highlight">Doogies</span></h1>
                        <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>

            var slideIndex = 1;

            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", "");
                slides[slideIndex - 1].style.display = "block";
                dots[slideIndex - 1].className += " active";
    <section id="showcase">
        <div class="container50percent">
                <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 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 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 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>

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

                <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> 
            <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());
            <img src="images/palm%20tree%20and%20sunset%20left.jpg" width="45"/>



RE: Making slideshow using W3Schools example gives error

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


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.

RE: Making slideshow using W3Schools example gives error

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?


RE: Making slideshow using W3Schools example gives error

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..


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.

RE: Making slideshow using W3Schools example gives error

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


RE: Making slideshow using W3Schools example gives error

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. <test HTML page


RE: Making slideshow using W3Schools example gives error

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close