Javascript function within loop not applying to other divs

Question

I'm trying to create a CMS page that loads available hotel rooms. There are key features pertaining to the issue I'm having... there are three div's (these are thumbnails with different views of the hotel room) and then there's a div which is a preview div (this displays whatever image you are currently you are currently hovering on - when you move your mouse out of the thumbnail div, a default image is displayed)...

The HTML, CSS, MySQL, PHP works perfectly. The div's all populate successfully on the page.

However I'm having an issue with the thumbnail divs. For instance, when I hover on the .thumbOne div of the first element, the .preview div displays a random image from the last element. Same thing with .thumbTwo and .thumbThree. They all display values from the last element.

And then when I go to to the second element and hover on one of the thumbnails, nothing changes on the second element - however this will display the value or image linked to the last element in the first element - same as the previous scenario.

Not sure what I'm doing wrong. But my guess is, this has something to do with getElementById - ID's should be unique, I understand. Perhaps I should be using getElementsByClassName - but I tried this and didn't work. The following is the code I have:

<div class="mainContainer">
<div class="containerMainContentSOne">
    <table border='0' align='center' width='800px' height='250px'>
        <tr>
            <?php while ($row = $rs_result->fetch_assoc()){ ?>          
                <script type="text/javascript">
                    function thumbnailOneHover() {
                        document.getElementById("preview").src = "<?php echo ($row['mediaThumbnailOne']); ?>";
                    }

                    function thumbnailTwoHover() {
                        document.getElementById("preview").src = "<?php echo ($row['mediaThumbnailTwo']); ?>";
                    }

                    function thumbnailThreeHover() {
                        document.getElementById("preview").src = "<?php echo ($row['mediaThumbnailThree']); ?>";
                    }

                    function thumbnailLeave() {
                        document.getElementById("preview").src = "<?php echo $row['defaultImage']; ?>";
                    }
                </script>
            <td width='700' height='248' valign='top'>  
                <div class="previewContainer">
                    <div class="previewThumbnail">
                        <div class="previewHotel">
                            <a href='#'><img class="preview" id="preview" src="<?php echo $row['defaultImage']; ?>" /></a>
                            <div class="thumbnailContainer">
                                <div class="thumbnailContainerOne"><img class="thumbnailOne" id="thumbnailOne" onmouseover="thumbnailOneHover()" onmouseout="thumbnailLeave()" src="<?php echo $row['mediaThumbnailOne']; ?>" /></div>
                                <div class="thumbnailContainerTwo"><img class="thumbnailTwo" id="thumbnailTwo" onmouseover="thumbnailTwoHover()" onmouseout="thumbnailLeave()" src="<?php echo $row['mediaThumbnailTwo']; ?>" /></div>
                                <div class="thumbnailContainerThree"><img class="thumbnailThree" id="thumbnailThree" onmouseover="thumbnailThreeHover()" onmouseout="thumbnailLeave()" src="<?php echo $row['mediaThumbnailThree']; ?>" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <?php }; ?>
    </table>    
</div>

Please excuse me for the ambiguous divs...

so I have tried a couple of things. Tried to use the getElementsByClassName:

<script type="text/javascript">
function thumbnailOneHover() {
    var x = document.getElementsByClassName("preview");
    var i;
    var y = <?php echo $row ?>;
    for (i = 0; i <= y; i++) {
        x[i].src = "<?php echo ($row['mediaThumbnailOne']); ?>";
    } 
}

function thumbnailTwoHover() {
    var x = document.getElementsByClassName("preview");
    var i;
    var y = <?php echo $row ?>;
    for (i = 0; i <= y; i++) {
        x[i].src = "<?php echo ($row['mediaThumbnailTwo']); ?>";
    } 
}

function thumbnailThreeHover() {
    var x = document.getElementsByClassName("preview");
    var i;
    var y = <?php echo $row ?>;
    for (i = 0; i <= y; i++) {
        x[i].src = "<?php echo ($row['mediaThumbnailThree']); ?>";
    } 
}

function thumbnailLeave() {
    var x = document.getElementsByClassName("preview");
    var i;
    var y = <?php echo $row ?>;
    for (i = 0; i <= y; i++) {
        x[i].src = "<?php echo ($row['defaultImage']); ?>";
    } 
}
</script>

Am I missing something here? Thanks in advance and sorry for the extra long post.

Answer 1

Just define the functions once, and have them take arguments that say which image to update and where to get the image from.

IDs need to be unique. I've changed the ID of the preview image to include an index. I've gotten rid of the IDs of the thumbnails, since they're probably not needed (but you could add $i to them if you need).

You can also get the URLs from the src of the image you're hovering over, and save the default image in a data attribute.

BTW, the <tr> tag needs to be inside the loop.

<script>
function thumbnailHover(thumb, previewId) {
    document.getElementById(previewId).src = thumb.src;
}
function thumbnailLeave(previewId) {
    var img = document.getElementById(previewId);
    img.src = img.dataset.src;
}
</script>
<div class="mainContainer">
<div class="containerMainContentSOne">
    <table border='0' align='center' width='800px' height='250px'>
        <?php
        var i = 0;
        while ($row = $rs_result->fetch_assoc()) {
            $preview_id = "preview-$i"; ?>
            <tr>
                <td width='700' height='248' valign='top'>  
                    <div class="previewContainer">
                        <div class="previewThumbnail">
                            <div class="previewHotel">
                                <a href='#'><img class="preview" id="$preview_id" src="<?php echo $row['defaultImage']; ?>" data-src="<?php echo $row['defaultImage']; ?>" /></a>
                                <div class="thumbnailContainer">
                                    <div class="thumbnailContainerOne"><img class="thumbnailOne" onmouseover="thumbnailHover(self, '<?php echo $preview_id; ?>')" onmouseout="thumbnailLeave('<?php echo $preview_id; ?>')" src="<?php echo $row['mediaThumbnailOne']; ?>" /></div>
                                    <div class="thumbnailContainerTwo"><img class="thumbnailTwo" onmouseover="thumbnailHover(self, '<?php echo $preview_id; ?>')" onmouseout="thumbnailLeave('<?php echo $preview_id; ?>')" src="<?php echo $row['mediaThumbnailTwo']; ?>" /></div>
                                    <div class="thumbnailContainerThree"><img class="thumbnailThree" onmouseover="thumbnailHover(self, '<?php echo $preview_id; ?>')" onmouseout="thumbnailLeave('<?php echo $preview_id; ?>')" src="<?php echo $row['mediaThumbnailThree']; ?>" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <?php 
            i++;
        } ?>
    </table>
</div>