Need to toggle STYLE.DISPLAY value of elements in an ARRAY of DIV tags.

I have a set of <DIV>'s with identical ID's such as the following:

<DIV ID="content" STYLE="display:inline;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>
<DIV ID="content" STYLE="display:none;">Display Text</DIV>

Notice that only the first one is actually visible.

I need to write a function that loops through the array DOCUMENT.ALL("content") and sets STYLE.DISPLAY = "none" for all elements, records which one was "inline" last, and set the next element in the array to "inline".  If it gets to the last element, then the first one needs to be set to "inline", and the sequence repeats.

The function will be called with a timer.  So each time it runs, it will examine the state of the DOCUMENT.ALL("content") elements, and roll the "inline" property to the next one in sequence.

Here's a visualization of how the function should operate if run for 7 iterations in sequence on 4 DIV objects.  X stands for "style.display = inline", O stands for "style.display = none".

1:   X    O    O    O
2:   O    X    O    O
3:   O    O    X    O
4:   O    O    O    X
5:   X    O    O    O
6:   O    X    O    O
7:   .......


Any takers?
MedtronicVascSRAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan9999Commented:
you shouldn't have multiple id's with the same value.
what are you trying to accomplish with this? i think you
are just wanting the text to change with a timer is this
correct? if it is it would be better to make and array of
the different text's you want displayed and then change
the node value for the div's text node with the setTimeout
function.
0
ZvonkoSystems architectCommented:
Here my example:

<html>
<head>
<title>Zvonko &#42;</title>
<script>
function rotate(){
  var cnt = document.getElementById("content");
  cnt = cnt.getElementsByTagName("div");
  for(var i=0;i<cnt.length;i++){
    if(cnt[i].style.display=="inline"){
      break;
    }
  }
  cnt[i].style.display="none";
  var n = i+1;
  if(n>=cnt.length)n=0;
  cnt[n].style.display="inline";
  setTimeout(rotate, 1000);
}
</script>
</head>
<body onLoad="rotate()">
<DIV ID="content">
<DIV STYLE="display:none;">Display Text 1</DIV>
<DIV STYLE="display:none;">Display Text 2</DIV>
<DIV STYLE="display:none;">Display Text 3</DIV>
<DIV STYLE="display:inline;">Display Text 4</DIV>
</DIV>
</body>
</html>

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MedtronicVascSRAuthor Commented:
ZVonko, you're a MACHINE!  That works beautifully.

Best regards,
Carlos
0
ZvonkoSystems architectCommented:
:-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.