how to change a text and image every 5 seconds in javascript and html

Question

hey I wrote a JavaScript code and I managed to make the image change every few seconds but the text is changing alongside with the image but not the correct text is shown here is the code:

is there any efficient way to do it my goal is to make 3-5 images on an html webpage that change between each other every few seconds and each image has a different text above it

user_6127393 · Answer

Combine your two functions into one, so both things happen at the same time:

user_1377002 · Answer

Instead of maintaining two arrays have one array of objects each of which contains image and text information. You can then create markup containing both sets of information at once rather than relying on two functions.

This working example uses images from dummyimage.com.

const data = [
  { image: 'https://dummyimage.com/100x100/666/ff0', text: 'Image 1' },
  { image: 'https://dummyimage.com/100x100/222/ff0', text: 'Image 2' },
  { image: 'https://dummyimage.com/100x100/fff/000', text: 'Image 3' },
  { image: 'https://dummyimage.com/100x100/a45/000', text: 'Image 4' },
];

// Cache the element
const div = document.querySelector('div');

// `carousel` is the main function into which we
// pass the data
function carousel(data) {

  // `loop` is what `setTimeout` calls every second
  // We initialise `count` to 0
  function loop(count = 0) {

    // Create the HTML using a template string
    const html = `
    
      
      ${data[count].text}
    `;
    
    // Add the markup to the div
    div.innerHTML = html;

    // Reset the count if we've reached the
    // end of the array, otherwise increment it
    if (count === data.length - 1) {
      count = 0;
    } else {
      ++count;
    }
    
    // Call `loop` every second with the
    // updated `count` variable
    setTimeout(loop, 1000, count);
  
  }
  
  loop();

}

carousel(data);

Additional information

Template/string literals
querySelectorAll
figure

user_13084948 · Answer

The way I would do it is this:

const text = ["MSG1", "MSG2", "MSG3"];
const image = ["image1.jpg", "image2.jpg", "image3.jpg"];

const imageObj = document.GetElementById("img");
const textObj = document.GetElementById("message");

let counter = 0;

function ChangeImage() {
    if (counter == text.length) { 
        counter = 0;
    }

    textObj.innerText = text[counter];
    imageObj.src = image[counter];

    counter++;
}

setInterval(ChangeImage, 3000); // 3000 = 3 Seconds, 5000 = 5 seconds.

The main thing to remember is to reduce the amount of times you repeat yourself, when looping through an array (when the pointer will be the same always) use the same variable (in this case counter)

user_10867454 · Answer

Your code is basically fine as far as timing goes - with intervals as long as 6 seconds you aren't going to notice if one timeout happens a microsecond after the other.

Your problem is a straightforward bug. There is a repetition of text[1] so the MSG2 never gets shown.

This is your snippet with just that change made and it works perfectly.

However, you mention efficiency, and again at such long time intervals it probably isn't going to make a great deal of difference as the JS is only called every 6 seconds but if you want to make more efficient code then consider ditching JS and using CSS animations instead - the browser will have a chance of using the GPU then.

how to change a text and image every 5 seconds in javascript and html

4 Answers