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);
}
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>