J'ai créé un javascript pour afficher une liste de fichiers PDF filtrés par un SELECT (année).
Cela fonctionne très bien sur une page HTML, mais lorsque j'intègre ce script dans un widget HTML Elementor cela ne fonctionne plus.
Il n'y a pas de message d'erreur dans la console, mais la modification du SELECT ne change pas la classe des éléments <div class="pdf-item">.
Voici le HTML et le script :
Code : Tout sélectionner
<style>
.pdf-item { display: none; }
.pdf-item.visible { display: block; }
</style>
<select id="yearFilter">
<option value="">Tous les ans</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<div id="pdfList">
<div class="pdf-item" data-year="2022">Document 1</div>
<div class="pdf-item" data-year="2023">Document 2</div>
<div class="pdf-item" data-year="2022">Document 3</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const yearFilter = document.getElementById('yearFilter');
const pdfList = document.getElementById('pdfList');
console.log('DOM fully loaded and parsed');
if (yearFilter) {
console.log('yearfilter existe');
yearFilter.addEventListener('change', function () {
debugger; // Ajoutez cette ligne avant l'événement change pour activer le débogage
console.log('Change event triggered');
const selectedYear = this.value;
console.log('Selected Year:', selectedYear);
pdfList.querySelectorAll('.pdf-item').forEach(item => {
const itemYear = item.dataset.year;
console.log('Item Year:', itemYear);
if (!selectedYear || itemYear === selectedYear) {
console.log('Adding visible class to:', item);
item.classList.add('visible');
} else {
console.log('Removing visible class from:', item);
item.classList.remove('visible');
}
console.log('Current classes for item:', item.className);
});
});
} else {
console.log('Year filter element not found');
}
});
</script>