Error with JavaScript slideshow The slideshow using JavaScript seems to

I'm currently utilizing a script from the WOW Slider (free version) that looks like this:

    var slideIndex = 0;
    function showSlides() {
        var i;
        slides = document.getElementsByClassName("mySlides"); 
        dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        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";
        setTimeout(showSlides, 3000); // Change image every 2 seconds
    }
    showSlides();

Everything appears to be functioning fine, but during an SEO check on the page, an error in the following line of Javascript was flagged:

slides[slideIndex-1].style.display = "block";

The specific error message is as follows:

"Uncaught TypeError: Cannot read property 'style' of undefined".

This error suggests that slides is not defined, even though it is initialized in the variable declarations.

I'm relatively new to Javascript and would greatly appreciate any assistance with resolving this issue. Thank you in advance.

Answer №1

I successfully resolved the issue by simply commenting out two lines of code. After removing the problematic line, I thoroughly checked all style sheets and could not find any class named "MySlides". Removing that line seemed to eliminate the error message. However, the error then shifted to the next line which I also removed. Surprisingly, even after eliminating both lines, the slideshow continued to function flawlessly. It appears that these two lines were unnecessary remnants from the original programmer. Although I am unsure how they contributed to the functionality, everything seems to be working smoothly now!

Answer №2

Experiment with

<body onload="displaySlides()">

Delete starting from the second line of JS: displaySlides()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When encountering an issue while invoking a function in Vue.js, an internal error may occur, as evidenced by the message: "new Http

Currently, I am in the process of developing an application and encountering an issue where I am unable to comprehend a cryptic error message that keeps popping up. If you'd like to see the error itself, you can check it out here. Below is my form.vu ...

"Enhance your website with a sleek Bootstrap navigation system featuring dividers and

Need help with creating a Bootstrap nav menu similar to this design made in Photoshop? Wondering about the best way to position the logo and create dividers between menu items like shown in this image. Here's the HTML code currently being used: & ...

The challenge lies in updating props using the `onchange` event in Vue.js 2

I am facing an issue with updating the data when using on-change from the select box. Initially, I can update the data by clicking a button or triggering the on-change event once. However, I encounter difficulties in updating the data multiple times throug ...

What is the best way to select a specific value from JSON (Webhook) Data?

I am looking for a way to extract and store a specific value from a JSON data into a variable. Specifically, I want to save the value of Name (John) in a variable like this: var name = "". I attempted using var name = data.Name but it is not wor ...

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

Tips on getting the Jquery .load() function to trigger just once and executing an Ajax request only once

Upon loading the page, I am utilizing the JQuery .load() function to retrieve content from a PHP file. The content loads successfully but it keeps reloading continuously as observed through Chrome Developer tools. I only want the content to load once. var ...

Creating several Doughnut Charts within a single Canvas using Chart.js

Is there a way to display multiple layers of a doughnut chart simultaneously using Chart.js? Currently, I'm only able to see one layer at a time and the others become visible upon hovering over their position... If you have any insights on how to mak ...

Implementing TypeScript type definitions for decorator middleware strategies

Node middlewares across various frameworks are something I am currently pondering. These middlewares typically enhance a request or response object by adding properties that can be utilized by subsequent registered middlewares. However, a disadvantage of ...

Prepare for the possibility of being labeled a failure, even if you have already been labeled

I wrote a test case code using Jest to check the functionality of my application. let ticketsTransformer = new TicketTransformer(); ticketsTransformer.transform = jest.fn(() => results); expect(ticketsTransformer.transform).toHaveBeenCalled(); con ...

Error: Angular 6 resolve consistently returns undefined

Seeking to implement my service for retrieving values from the database server and displaying them onscreen, I have set up a resolver for the service since the database can be slow at times. However, no matter what I try, the data received through this.ro ...

jQuery unable to find designated elements in uploaded templates

I have a specific route linked to a specific controller and view: app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/create', { templateUrl: 'partials/form/form.html', controlle ...

Struggling to fetch the latest state value in React with hooks?

I have implemented functional components with 2 radio buttons and a submit button. However, upon clicking the submit button, I am unable to retrieve the updated value properly. Check out my code at this link. To reproduce the issue: Start the applicatio ...

React Router will not remount the component when using this.context.router.push

We have implemented a click handler that utilizes react router 2.0 to update the URL with this.context.router.push(). Here is the code snippet: selectRelatedJob(slug) { JobActionCreators.fetchJobPage(slug); JobsActionCreators.getRelatedJobs({'sl& ...

How to Use Google Calendar API to Retrieve Available Time Slots for a Given Day

Is there a way to extract the list of available time slots from my Google Calendar? Currently, I am only able to retrieve the list of scheduled events. I am utilizing the Google Calendar npm package. google_calendar.events.list(calObj.name,{ timeMin ...

My eCommerce website is currently experiencing some technical difficulties that need to be addressed

I'm in need of assistance with a particular error I encountered. I was following an ecommerce example application and everything seemed to be going smoothly until I clicked on "Shop Now." At that point, I received the following message: Server Error T ...

Using Vue to fetch JSON data with Axios

When trying to retrieve user data from a MongoDB in JSON format using axios.get within a Vue.js application, my aim is to visualize this data by iterating through all user objects in the users array. The issue I'm facing is that each character is trea ...

Integrating external information with components

Currently in my React application, I am fetching a list of stores by directly calling the API through the URL. const getStore = async () => { try { const response = axios.get( 'http://localhost:3001/appointment-setup/storeList& ...

Loading screen while all files and audio are being loaded

My JavaScript code is responsible for displaying and playing audio on my website. Unfortunately, the load time of the page is quite slow. To address this issue, I decided to follow a tutorial on installing a preloader, which can be found at . Although I ...

What is the functionality of Google Chrome's "New Tab" iframes?

Have you ever wondered about those 8 small iframes displaying your most visited websites? How do they capture snapshots of the websites? How are the websites chosen for display? And most importantly, how do they actually work? Edit: I want to learn how to ...

Connecting a JavaScript script from my HTML file to Django's static files - here's how

I recently started a Django project with frontend code that wasn't initially written for Django. I am having trouble connecting this script: <script> document.body.appendChild(document.createElement('script')). src='js/ma ...