I am developing a website in Kirby environment and I have been testing it on localhost. A function within this website creates a highlight for each .main element that acquires a color upon hovering and changes back upon mouse leaving.
I have encountered a very specific problem that occures upon mouse hovering. The problem overall is that I am trying to target one element, however upon howering the mouse it fires them all at the same time.
I have console logged the function and it seems like that the code indeed detects multiple .main elements being selected.
The function works as intended when I run it on HTML directly from Visual Studio Code. (The screenshot attached is from that version.)
What could be the issue?
<?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="Info">
<?= $article->info()->kt() ?>
</div>
<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>
<?php endforeach; ?>
document.addEventListener('DOMContentLoaded', () => {
const mainElements = document.querySelectorAll('.main');
const headerDivs = document.querySelectorAll('.container_header > div');
const generateLightColor = () => {
const randomValue = () => Math.floor(Math.random() * 156 + 100);
return `rgb(${randomValue()}, ${randomValue()}, ${randomValue()})`;
};
mainElements.forEach(main => {
const randomColor = generateLightColor();
const container = main.querySelector('.container');
const spans = main.querySelectorAll('span');
console.log("Generated random color:", randomColor);
main.addEventListener('mouseenter', () => {
container.style.backgroundColor = randomColor;
document.documentElement.style.setProperty('--color-variable', randomColor);
headerDivs.forEach(div => {
div.style.backgroundColor = randomColor;
div.style.color = container.style.color = 'black';
});
spans.forEach(span => {
span.style.backgroundColor = randomColor;
span.style.color = 'black';
});
console.log("Mouse entered main element:", main);
});
main.addEventListener('mouseleave', () => {
container.style.backgroundColor = 'var(--color-border-dark)';
headerDivs.forEach(div => {
div.style.backgroundColor = 'var(--color-border-dark)';
div.style.color = container.style.color = 'var(--default-text-color)';
});
spans.forEach(span => {
span.style.backgroundColor = 'transparent';
span.style.color = 'inherit';
});
console.log("Mouse left main element:", main);
});
});
});
I have tried multiple takes, but none of them lead to resloving the problem. A lead I got was it might have to do with dynamic content generation and duplicates.
In the end, the problem was in the slug, as the code didn't handle the .main divs as individual elements, but as a collective.