Looking for a script that automatically swaps out a div at set intervals? You'll need to tweak it so that it only

I created a js script that dynamically changes the content of certain div elements at specified intervals. While I appreciate how it functions, I now need to modify it so that the script only executes once. Can someone help me achieve this?

<script type="text/javascript">

function initChangeText()
{
    var time = 10;
    setInterval('changeText();',time*1000);
}
function changeText()
{
    var divs_ = document.getElementsByTagName("div")
    for (var i = 0;i<divs_.length;i++)
        if (divs_[i].className == "change")
            changeULText(divs_[i]);

}
function changeULText(obj)
{
    var ul = obj.getElementsByTagName("ul")[0];
    var li = obj.getElementsByTagName("li");
    for (var i=0;i<li.length;i++)
    {
        if (li[i].className == "show")
        {
            li[i].className = "";
            li[(i+1)%li.length].className = "show";
            return ;
        }
    }
}
window.onload = initChangeText;
</script>

Thank you, Tim

Answer №1

You might want to consider using setTimeout in place of setInterval for better performance.

function initializeTextChange(){
    var time = 10;
    setTimeout(changeText,time*1000);
}
function changeText(){
    var divs_ = document.getElementsByTagName("div")
    for (var i = 0;i<divs_.length;i++)
        if (divs_[i].className == "change")
            changeListText(divs_[i]);

    }
function changeListText(obj) {
    var ul = obj.getElementsByTagName("ul")[0];
    var li = obj.getElementsByTagName("li");
    for (var i=0;i<li.length;i++){
        if (li[i].className == "show"){
            li[i].className = "";
            li[(i+1)%li.length].className = "show";
            return ;
        }
    }
}
window.onload = initializeTextChange;
</script>

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

JavaScript: Adjust DIV Width Based on Window Height

Is there a way to make the width of a div equal to the height of the window in jquery? I attempted this method: <script type="text/javascript"> $(".rt-container").style.width = $(window).height(); </script> Unfortunately, it did not work. I ...

using flexbox in react does not automatically resize

I am attempting to create a layout where the screen is split into two sections - one green block taking up 1/4 of the screen and one yellow block taking up 3/4 of the screen using react.js. However, when I tried implementing the code below, both blocks end ...

Component fails to trigger @click handler

.vue component <template> <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> Loading Files </div> < ...

Ways to remove code from production during build process?

Is there a way to omit typescript code from getting bundled by webpack during build process? Let's say I have the following line of code in my app.ts file (a nodejs application): const thisShouldNotBeInProductionBundleJustInDevBundle = 'aaaaaaa ...

Searching in sequelize for a specific date using a clause

Operating System: Linux (Lubuntu) Programming Language: Javascript (Node js) Framework: express js Database: mysql "data" represents a Date field from the "activitat" table Upon running this query using Sequelize.js models.TblActivitat.findAll( ...

Issues persist with the Angular UI Tree Module: the removed callback is not functioning as

I am currently utilizing a module that can be found at the following URL: https://github.com/angular-ui-tree/angular-ui-tree Unfortunately, I am facing an issue with getting the removed callback to work properly. The accept callback seems to be functionin ...

Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

I am currently working on creating a chatbox for both mobile and desktop websites. However, I have encountered an obstacle in implementing a specific message reply feature similar to Skype and WhatsApp. In this feature, the user can click on the reply butt ...

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

Concealing/Revealing Elements with jquery

For hours, I've been attempting to switch between hiding one element and showing another in my script. Here is the code I am using: <script type="text/javascript"> function () { $('#Instructions').hide(); $('#G ...

Tips for modifying the appearance of an anchor <a> element within a table cell with jQuery

One issue I am facing involves changing the style of a specific element within a table cell using jQuery. The change needs to be based on the value in another cell. Below is the table structure: <table id="table"> ...

Express js routing issue ("Page Not Found")

Why do I receive a "Cannot GET /" message when I access my HTTP server at http://localhost:8000/? I am using Express JS for server-side routing and Angular for client-side. Some sources suggest that this error occurs because I haven't set a route for ...

Utilizing Facebook's UI share URL parameters within the Facebook app on mobile devices

Encountering an issue with the Fb ui share functionality on certain smartphones Here is the function: function shareFB(data){ FB.ui({ method: 'share', href: data, }, function(response){}); } Implemented as follows: $urlcod ...

Adding a characteristic to every item in an array of objects

Currently, I am utilizing Node.js along with Mongoose to interact with a MongoDB database and retrieve an array of objects from a specific collection. However, my aim is to add an additional property to each of these retrieved objects. Below, you can see t ...

`Accessing information within a nested JSON array``

I'm currently parsing through the JSON data below. While I can extract the id and name fields without any issues, I am encountering a problem when trying to access json.templates[i].dailyemails.length, as it always returns 0. Below is the structure o ...

Time when the client request was initiated

When an event occurs in the client browser, it triggers a log request to the server. My goal is to obtain the most accurate timestamp for the event. However, we've encountered issues with relying on Javascript as some browsers provide inaccurate times ...

What is the best way to retrieve the value of a JavaScript variable and display it within an HTML label tag

In my JavaScript code, I'm attempting to retrieve location coordinates using the onchange event and then display those coordinates in a label. I've tried alerting the coordinates successfully, but I'm struggling to update the label using doc ...

Can GET or POST variables be transmitted to external JavaScript?

Is it possible to pass a variable to an external JavaScript file? For instance: Suppose I have the following code: <script type="text/javascript" src="gallery.js"></script> I'm curious to know if it's feasible to pass an argument ...

Struggling with setting values in AngularJS?

Can you assist me in passing data from: (Page 1 -> Module 1 -> Controller 1) to (Page 2 -> Module 2 -> Controller 2) For example: Module reports - Controller ReportsCtrl //Page 1 <html lang="en" class="no-js" ng-app="reports"> <a ng-href="../n ...

I must interact with the video within the iframe by clicking on it

I am trying to interact with an iframe video on a webpage. Here is the code snippet for the video: <div class="videoWrapper" style="" xpath="1"> <iframe width="854" height="480" src="xxxxxxx" frameborder="0" allow="autoplay; encrypted-media" all ...

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

What is the proper way to map a list of images returned using getStaticProps? I had successfully implemented this by passing a prop to the gallery component in another page. However, I now want to consolidate all the getStaticProps code within the gallery ...