Forums Tout JavaScript

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>