javascript getElementById() doesnt work with repeat regions

[YWSW]

I am trying an onmouseover and onmouseout to swap entire divs that repeat in a php repeating region, and the javascript only seems to work for the first div repetition. Is this because the repeating region creates many identical divs and the javascript is confused?

The following is a very simple version of my code setup which will explain my issue:

I am creating a forum where the individual comments are contained in their own div ('commentDisplay'). To do this I created one div and set up a repeating region around it so that php churns out all the comments giving each one a copy of this div.

for example:

<?php do { ?>

     <div class="commentDisplay">

          <?php echo $row_whateverRS['whatever']; ?>

     </div>

<? } while ......?>

Now I wanted to create a simple javascript code that when the user moved thier mouse over the post it would hide that div and display another div which held the same contents but had a different color background and, more importantly, offered the user a chance to reply to the post (similar to the youtube comment section). So I created the following:

<script...>

     function hideDiv(id) {

          document.getElementById(id).style.display = "none"; }

     function revealDiv(id) {

          document.getElementById(id).style.display = "block"; }

</script>

and then I created this other div ('commentSwap') that held the same information, but with a different background and the option to reply (and with display:none) and inserted the javascript code:

<?php do { ?>

     <div class="commentDisplay" onmouseover="hideDiv('commentDisplay'); revealDiv('commentSwap')" onmouseout="revealDiv('commentDisplay'); hideDiv('commentSwap')">

          <?php echo $row_whateverRS{'whatever']: ?>

     </div>

          <div class="commentSwap">

               ...same- except ability to reply

          </div>

<?php } while.....?>

the problem is that the code seems to work only for the first repetition of the div and not for the rest. Moreover, when I move my mouse over the other divs it causes the first div to swap.

Why is this? Is it because all the repeating divs (through the repeating region) all have the same name and are confusing the javascript?

thanks,

YWSW

[Guest]

Your code has classes but you're using getElementById. Furthermore, ID's can only occur once on a page.

Read this: http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

Definition and Usage

The getElementById() method accesses the first element with the specified id.

best,

Shocker

[YWSW]

sorry- I did have ids, I had just forgot to write them into my example.

so what do you suggest that I do instead (to produce the same show div/ hide div result for divs in a repeating region?

[Guest · Accepted solution]

YWSW wrote:

so what do you suggest that I do instead (to produce the same show div/ hide div result for divs in a repeating region?

As evident by the fact that you can not have more than one ID on a page, my suggestion is to create unique id's in your loop. Database table has primary key id with numerical value. Loop accordingly, appending the unique ID from the recordset to the id of the div that is looped. Observe the provided code.

<script>

     function hideDiv(id) {

          document.getElementById(id).style.display = "none"; }

     function revealDiv(id) {

          document.getElementById(id).style.display = "block"; }

</script>

<?php do { ?>

     <div id="commentDisplay_<?php echo $row_whateverRS['whateverID']; ?>" onmouseover="hideDiv('commentDisplay_<?php echo $row_whateverRS['whateverID']; ?>'); revealDiv('commentSwap_<?php echo $row_whateverRS['whateverID']; ?>')" onmouseout="revealDiv('commentDisplay_<?php echo $row_wheteverID['wheteverID']; ?>'); hideDiv('commentSwap_<?php echo row_whateverRS['whateverID']; ?>')">

          <?php echo $row_whateverRS['whatever']; ?>

     </div>

          <div id="commentSwap_<?php echo $row_whateverRS['wheteverID']; ?>">

               ...same- except ability to reply

          </div>

<?php } while.....?>

[YWSW]

excellent.

as always.