'Need automatic text with JS changing while the pictures above it also change

Its a small school task. The pictures change correctly, that part was given by the teacher and I understand how the image change works. But I dont understand how I should make a text array change the texts. Tried some examples that were online but they didnt work with the code I have. This is the HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Rotating Banner</title>
    <script
      src="script07.js"
      language="javascript"
      type="text/javascript"
    ></script>
  </head>
  <body>
    <div align="center">
      <img
        src="reading1.gif"
        width="400"
        height="75"
        id="adBanner"
        alt="Ad Banner"
      />
    </div>
    <span id="example">Start</span>
  </body>
</html>

This is the javascript. The first part works fine.

The "var texts" part was found online. The 2nd JS example after this one I tried to recreate based on the picture rotation.

window.onload = rotate;

var adImages = new Array("reading1.gif", "reading2.gif", "reading3.gif");
var thisAd = 0;

function rotate() {
  thisAd++;
  if (thisAd == adImages.length) {
    thisAd = 0;
  }
  document.getElementById("adBanner").src = adImages[thisAd];

  setTimeout("rotate()", 3 * 1000);
}

var texts = ["example1", "example2", "example3"];
var count = 0;
function changeText() {
  document.getElementById("example").texts;
  count < 3 ? count++ : (count = 0);
}
setInterval(changeText, 3 * 1000);

Also tried this:

window.onload = rotate;
var adImages = new Array("reading1.gif", "reading2.gif", "reading3.gif");
var thisAd = 0;
function rotate() {
  thisAd++;
  if (thisAd == adImages.length) {
    thisAd = 0;
  }
  document.getElementById("adBanner").src = adImages[thisAd];
  setTimeout("rotate()", 3 * 1000);
}
window.onload = rotate2;
var adTexts = new Array("Tere", "Head aega", "Mul pole aega");
var thisText = 0;
function rotate2() {
  thisText++;
  if (thisText == adTexts.length) {
    thisText = 0;
  }
  document.getElementById("example").span = adTexts[thisAd];
  setTimeout("rotate()", 3 * 1000);
}
javascripthtml


Solution 1:[1]

There is actually only one line you need to change in your first JS approach:

document.getElementById("example").textContent = texts[count];

window.onload = rotate;

var adImages = new Array("reading1.gif", "reading2.gif", "reading3.gif");
var thisAd = 0;

function rotate() {
  thisAd++;
  if (thisAd == adImages.length) {
    thisAd = 0;
  }
  document.getElementById("adBanner").src = adImages[thisAd];

  setTimeout("rotate()", 3 * 1000);
}

var texts = ["example1", "example2", "example3"];
var count = 0;
function changeText() {
  document.getElementById("example").textContent = texts[count];
  count < 3 ? count++ : (count = 0);
}
setInterval(changeText, 3 * 1000);
<!DOCTYPE html>
<html>
  <head>
    <title>Rotating Banner</title>
    <script
      src="script07.js"
      language="javascript"
      type="text/javascript"
    ></script>
  </head>
  <body>
    <div align="center">
      <img
        src="reading1.gif"
        width="400"
        height="75"
        id="adBanner"
        alt="Ad Banner"
      />
    </div>
    <span id="example">Start</span>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mushroomator

Related Questions