->num() doesn’t work for js function

1

I have a problem with the numbering of my iframes. I have created a unique reference using $project->num(). The script creates the numbering in the code exactly as I need it. However, the function I want (closing the iframe onmouseout) does not work when the manually set -1 is replaced by the generated -1. This is a mystery to me. Can anyone tell me what the problem is?

<div class="more-details-2">
                      <div class="container">
                        <?php if($image = $project->image()): ?>
                        <img id="mainImage-<?= $project->num() ?>" src="<?= $image->url() ?>" alt="">
                        <?php endif ?>


                        <iframe class="iframe-video " name="iframe-<?= $project->num() ?>" id="iframe-<?= $project->num() ?>" width="1000" height="563" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe>

                      </div>

                </div>

                <div class="more-details-3">
                  <div class="row">

                    <div class="column" onmouseover="changeImage<?= $project->num() ?>(event)">

                        <?php /*      BILDER     */ ?>
                        <?php foreach($project->images() as $image): ?>

                          <div class="column-thumb">
                            <img src="<?= $image->url() ?>" data-src="<?= $image->url() ?>">

                            <?php echo '<script type="text/javascript">',
                                        'function changeImage'.$project->num().'(event) {',
                                          'event = event || window.event;',
                                          'var targetElement = event.target || event.srcElement;',
                                          'if (targetElement.tagName == "IMG") {',
                                            'document.getElementById("mainImage-'.$project->num().'").src = targetElement.getAttribute("data-src");',
                                          '}',
                                          '}',
                                        '</script>';
                                        ?>
                          </div>
                        <?php endforeach ?>

                        <?php /*      VIDEOS     */ ?>

                        <?php if ($video = $project->vimeolinks()): ?>
                          <?php foreach($project->vimeolinks()->toStructure() as $vimeovid): ?>
                            <?php $videoID = $vimeovid->vimeovid();?>

                            <?php echo $vimeovid->oembed([
                               'lazyvideo' => true,
                               'autoload' => true,
                               'thumb' => '',
                             ]); ?>


                              <div class="column-thumb">
                                <a onmouseover="click();getBUTTON();" onmouseout="click();closeiframe();"  href="https://player.vimeo.com/video/<?= $videoID ?>?autoplay=0&loop=1&title=0&byline=0&portrait=0" target="iframe-<?= $project->num() ?>" >
                                  <img id="playbutton" src="assets/icons/playbutton_7.png" alt=""></img>
                                  <img id="videothumb" src="https://vumbnail.com/<?= $videoID ?>.jpg" alt=""></img>
                                </a>
                              </div>

                          <?php endforeach ?>



                          <script type="text/javascript">
                                function removeBUTTON() {
                                document.getElementById("closebutton").classList.add("hide");
                                document.getElementById('iframe-<?= $project->num() ?>').classList.add("hide");

                                }
                                function getBUTTON() {
                                document.getElementById("closebutton").classList.remove("hide");
                                document.getElementById("iframe-<?= $project->num() ?>").classList.remove("hide");
                                }

                                function closeiframe() {
                                  document.getElementById('closebutton').classList.add("hide");
                                  document.getElementById('iframe-<?= $project->num() ?>').classList.add("hide");
                                }
                          </script>



                        <?php endif ?>

                        <input class="hide" id="closebutton" name="closebutton" type="button" value="[HIDE VIDEO]" onclick="closeiframe()"></input>

                    </div>

                  </div>
                </div>
2

It looks like the whole code snippet you posted would be repeated multiple times on the page (once for each $project). Right?

If that’s true, you would be overriding your javascript functions (removeBUTTON, getBUTTON and closeiframe) with each project. There can only be 1 function with a given name in scope. So when you click one of the buttons, or when you leave an iframe with your mouse, you most probably are calling the “wrong” function (always the one from the last $project iteration).

Here’s an example on codepen where I recreated your scenario. Notice that no matter which button you press, you always get the same message.

You probably would want to move your javascript functions out of the $project loop and then call them while passing different arguments to them instead