Javascript newbie problem

frank5050

06-23-2012, 09:08 PM

Hi I am using the following script to display few strings of text with a set delay.

My problem is that after displaying all strings of text, the script goes back to displaying the first string again.

I would like the script to stop after displaying the last text string.

Your help would be appreciated.

<script type="text/javascript">

//addThisEvent -utility function for setting event listeners
//cross-browser, and preserving 'this' within attachEvent.
//el may be a single html element as a DOM object, or the window object,
//type should be string name of event type ('on' prefix not required, so 'mouseover' or 'onmouseover' works fine)
//fn should be a function to set as an event handler
function addThisEvent(el, type, fn) {
var ename = type.replace(/^on/i, '');
if (el.attachEvent) { //IE
el.attachEvent('on'+ ename, function () {
return fn.call(el, window.event); //fixes IE's fudging of 'this' in attachEvent
});
} else if (el.addEventListener) { //Standard
el.addEventListener(ename, fn, false );
} else {
el["on"+ename] = fn;
}
}

addThisEvent(window, 'load', function () {
var i = 0,
frequency = 2000, //rate of change frequency, 1000 = 1 second
el = document.getElementById('rotatingTextParagraph'), //the html DOM element to show the text in
textArray = [
'first text string',
'second text string',
'third text string',
'Fourth text string'
];
el.innerHTML = textArray[i++];
el.textRotationInterval = window.setInterval(function () {
if (i >= textArray.length) {
i = 0;
}

el.innerHTML = textArray[i++];
}, frequency);

});

</script>

felgall

06-23-2012, 09:49 PM

Replace:

if (i >= textArray.length) {
i = 0;

with:

if (i >= textArray.length) {
clearInterval(el.textRotationInterval);

frank5050

06-23-2012, 09:57 PM

Hi Stephen,

Thanks for your response.

With your suggestion, it's not looping back to the first text string which is fine, but now it displays the word 'undefined' after the last string is displayed.

I forgot to mention in my first post that once the earlier strings have been displayed I would like the last string to be displayed indefinitely on the page.

For example in my code example above, once the first 3 text strings have been displayed, I'd like 'Fourth Text String' to display constantly without the script going back to the first string again.

Currently after i implemented your suggestion it is showing the text 'undefined' after displaying the final string of text.

Lerura

06-23-2012, 10:11 PM

Eeeh!
Why using an advanced function to create an advanced eventListener that can be called by just window.onload??
var textNum=0;
var frequency = 2000;
var textArray = [
'first text string',
'second text string',
'third text string',
'Fourth text string'
];
function displayTexts(){
document.getElementById('rotatingTextParagraph').innerHTML=textArray[textNum++];
if (textNum<textArray.length){
setTimeout(displayTexts,frequency);
}
}
window.onload=function(){displayTexts();}

frank5050

06-24-2012, 12:39 AM

Thanks Lerura. Your code snippet works just fine.

I would like to know if this script is cross-browser compatible?

If not, what can I do to make sure this works on pretty much all browsers?

Thanks

Old Pedant

06-24-2012, 02:42 AM

That will work on all browsers.

If you take that <script> *OUT* of the <head> of your page and put it JUST BEFORE the </body> of your page, it can even be a tad simpler. And we can tweak the code, too, to be simpler.

<html>
<body>
.... body of page here ...
<script type="text/javascript">
var textArray = [
'first text string',
'second text string',
'third text string',
'Fourth text string'
];
function displayTexts()
{
document.getElementById('rotatingTextParagraph').innerHTML
= textArray.shift();
if ( textArray.length > 0 )
{
setTimeout( displayTexts, 2000 );
}
}
displayTexts();
</script>
</body>
</html>