Javascript doesn't work properly on localhost

The CMS Questions
1

I have encountered an error with my website where Javascript functions improperly on the localhost environment.
I have previously encountered a similar problem with image loading (solved), which I have posted about in this thread: Images not loading in local host

The website is the same. The problem arises from a function that involves “mouseenter” and “mouseleave” events, and changing the colors of certain divs. When the mouse enters a div, its color changes to a generated random color, and returns to its standard color upon leaving. The problem in this case is that the whole function operates with bugs.

I am assuming that it is the localhost/Kirby since when I run the code purely from Visual Studio Code (HTML, CSS, JavaScript), the error does not occur, and the JavaScript and CSS were copied directly from the vanilla version.

The console doesn’t provide anything, there are no loading/syntax errors.

Screenshot 2024-11-05 at 20.11.54
Screenshot 2024-11-05 at 20.11.542880×734 234 KB

(Only one of the divs should be highlighted at the time.)

Thank you in advance!

2

That’s certainly not a problem with Kirby and since the highlighting seems to work in general, maybe it’s some sort of markup issue (maybe duplicate ids or so=.

3 
<?php foreach ($page->articles()->toStructure() as $article): ?>
              <div class="main">
                  <div class="container" onclick="toggleSibling(this);">
                      <div class="Title"><?= $article->title() ?></div>
                      <div class="Genre"><?= $article->genre() ?></div>
                      <div class="Publisher"><?= $article->publisher() ?></div>
                      <div class="Datum"><?= $article->datum() ?></div>
                  </div>
                  <div class="content">
                      <div class="Image">
                          <!-- <img src="content/test/painting-forest-lake.jpg"> -->
                          <div class="swiper">
                              <div class="swiper-wrapper">
                                  <?php foreach ($article->images()->toFiles() as $image): ?>
                                      <div class="swiper-slide">
                                          <img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
                                      </div>
                                  <?php endforeach; ?>
                              </div>
                              <div class="swiper-scrollbar"></div>
                              <button class="slick-prev"></button>
                              <button class="slick-next"></button>
                          </div>
                      </div>
                      <div class="Page"></div>
                      <div class="Text">
                          <?= $article->text()->kt() ?>
                      </div>
                      <div class="Info">
                      <?= $article->info()->kt() ?>
                  </div>
              </div>
          <?php endforeach; ?>

Here is the structure that I am using, the problem arises when targeting .container and creating spans with Javascript in .Page and the paragraphs in .Info, the rest of the functions work as intended, including the swiper and toggle.

I was trying to find duplicate ID-s in console, but no luck with that.

4

This element exists multiple times (once foreach element in the loop), so depending on what you do in your JS, this will affect all elements of this class. But again, not a Kirby problem.