JavaScript Slide Show using setInterval()

Need some help with JavaScript! I have a slide and I want to add a button to either make it autoplay or stop it. When I just use an Alert inside the function, it works, but when I add the interval code, it won't. Check out my codepen link

Here is the code for my slide:

<div class="Dash_map_wrapSlider" id="Dash_map_wrapSlider">
   [slide HTML code here]
</div>

   [additional slide HTML code here]

            <div class="Dash_map_wrapSliderchoise">
                <label for="Dash_map_sumSlideSite">Site / Alarme</label>
                <label for="Dash_map_sumSlideAlarme">Technicien / Action</label>
      <span id="autoplay" style="color:#fff;">Autoplay</span>
            </div>

My JS code :

function playSlide() {
        console.log('heeey');
        var elementSlide = document.getElementById('autoplay');
        elementSlide.onclick = function(){
            //alert('hey beauty !');
            setInterval(function(){
                $('#autoplay');
            }, 3000);
        };
    }

Thank you!

Answer №1

To enhance your playSlide function, consider implementing the following changes. This will help in cycling through the radio buttons and automatically selecting the next one every 3 seconds.

var nextSlide = 0;
var slideTimer = null;
function playSlide() {
    var elementSlide = document.getElementById('autoplay');
    
    elementSlide.onclick = function() {
        var slides = document.querySelectorAll('#Dash_map_wrapSlider input[id^="Dash"]');
        
        if (!slideTimer) {
            elementSlide.innerHTML = "Stop";
            slideTimer = setInterval(function() {
                if (slides.length <= nextSlide) 
                    nextSlide = 0;

                console.log('showing slide ' + nextSlide);
                slides.forEach(function (slide, index) {
                    slide.checked = index === nextSlide;
                });

                nextSlide++;
            }, 3000);
        } else {
            elementSlide.innerHTML = "Start";
            clearInterval(slideTimer);
            slideTimer = null;
        }
    };
}

playSlide();
.Dash_map_wrapSlider {
position: absolute;
overflow: hidden;
height: 100%;
width: calc(100% - 3rem);
bottom: calc(-80% + 10rem);
left: 3rem;
background: #fff;
border: 1px solid;
transition: 0.5s;
z-index: 1;
}
... (CSS Continues)
<div class="Dash_map_wrapSlider" id="Dash_map_wrapSlider">
... (HTML Continues)
</div>

<div class="Dash_map_wrapSliderchoise">
<label for="Dash_map_sumSlideSite">Site / Alarme</label>
<label for="Dash_map_sumSlideAlarme">Technicien / Action</label>
          <span id="autoplay" style="color:#fff;">Start</span>
</div>

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

Arranging form elements and a map in a side-by-side layout using HTML5

How can I align the contents of a map and a form side by side with responsive design? I've attempted using tables and lists, but the form keeps appearing on top of the map. Ideally, I want the contents to be displayed side by side on wider screens and ...

Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use animation-iteration-count: infinite. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it ...

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

Change the background color of the selectInput component in Shiny to fit your

Take a look at this sample shiny app: library(shiny) ui <- fluidPage(tags$head(includeCSS("www/mycss.css")), selectInput("foo", "Choose", width = '20%', multiple = F, selected = "red1", choices = list(red = c ...

Tips for positioning an inner div within an outer div

Code Snippet: <div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> <secti ...

Feeling grateful: Enable scroll functionality for a log widget

I am currently utilizing the Blessed library to create a dashboard within the terminal. My issue lies in making the log widget scrollable. Despite implementing the code below, I am unable to scroll using my mouse wheel or by dragging the scrollbar: var l ...

Learn how to incorporate a click event with the <nuxt-img> component in Vue

I am encountering an issue in my vue-app where I need to make a <nuxt-img /> clickable. I attempted to achieve this by using the following code: <nuxt-img :src="image.src" @click="isClickable ? doSomeStuff : null" /> Howeve ...

The Issue of Anti Forgery Token Not Functioning Properly with Ajax JSON.stringify Post

I have been attempting to utilize an Anti Forgery token with JSON.stringify, but despite researching multiple sources, I have not been successful. Below is my AJAX code for deleting some information without any issues. Upon adding the anti forgery token, I ...

`There is a problem of callbacks executing twice upon loading AJAX content`

My webpage is loading content using the waypoints infinite scroller plugin. After the AJAX call successfully adds DOM elements, a callback function is triggered to reinitialize javascript functionalities such as carousels, buttons, and other animations. ...

Retain the formatting of HTML while extracting the text

Is there a simple way to extract text from HTML source without losing formatting (such as line breaks and spaces)? Currently, my text extraction process looks like this: page_title_element = driver.find_element_by_xpath("x-path") page_title = pa ...

Struggling to Align NAV buttons to the Right in React Framework

My current Mobile Header view can be seen here: https://i.stack.imgur.com/CcspN.png I am looking to achieve a layout similar to this, https://i.stack.imgur.com/pH15p.png. So far, I have only been able to accomplish this by setting specific left margins, ...

Generating a business card example using node-html-pdf on an Ubuntu operating system

I am currently attempting to utilize the node-html-pdf module on Ubuntu 16.04 by following the businesscard example provided at https://github.com/marcbachmann/node-html-pdf. Regrettably, I encountered difficulties in generating the PDF file. To begin wi ...

Is SqliteDataReader not compatible with C#?

Currently, I am facing an issue with displaying data from a SQLite database on a web page using C#. Despite my efforts to find a solution and only coming across the console.writeline method, the SqliteDataReader function is not functioning properly. Below ...

Updating a boolean prop does not cause the child component to be refreshed

I am working with the following components: Parent: <template> <Child path="instance.json" v-bind:authenticated="authenticated" v-bind:authenticator="authenticator" /> </tem ...

Leverage environment variables in React JS to define distinct API URLs for production and development environments

For my React app, I started with create-react-app as the boilerplate. To make a request to my local server, I'm using fetch. fetch("http://localhost:3000/users") .then(function(res){ return res.json() }) .then(function(res){ return res.data }) ...

Retrieve posts from Angularjs

I am attempting to fetch tweets from a Twitter account using only AngularJS without the use of PHP or any other programming language. I have made several attempts but have not been successful. Additionally, I must utilize the 1.1 version of the Twitter A ...

Issue with Internet Explorer 7 causing table to display with added height

Currently investigating why there is additional space being added by IE. The only fixed data is the width of the image (171 px). Using Jquery, I checked the height of the div in Firefox, Chrome, and Opera which came out to 164px, but in IE 7 it's 172 ...

Relocate a table beside an image

Check out the layout of my webpage: ------------- ------------- Image here ------------- ------------- Table1 here Table2 here Table3 here My goal is to redesign it to look like this: ------------- ------------- Image here Table1 here - ...

How can CSS be used to create rounded corners on an entire webpage?

Looking for advice on how to enhance the appearance of my Progressive Web App (PWA) on devices with a "notch". I have sketched out the design with red arrows. If you need to inspect the CSS classes, you can visit my website at . I am seeking recommendation ...

Adjust the color of each list item depending on an array of strings

Within my perspective, I possess a collection of different statuses. <ul> <li>FIRST_STATUS</li> <li>SECOND_STATUS</li> <li>THIRD_STATUS</li> </ul> To continuously update the statuses in my contr ...