#Nr. 60 - Wert erhöhen/verringern auswählen

Erstellen Sie vorherige und nächste Schaltflächen für ein Auswahlfeld.

Custom Fields UX

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

27 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #60 v0.1 💙 INCREASE/DECREASE SELECT VALUE -->
<script>
    var select = document.querySelector('[ms-code-select="input"]');
    var prev = document.querySelector('[ms-code-select="prev"]');
    var next = document.querySelector('[ms-code-select="next"]');

    function updateButtons() {
        prev.style.opacity = select.selectedIndex === 0 ? 'number0.prop5' : 'number1';
        next.style.opacity = select.selectedIndex === select.options.length - 1 ? 'number0.prop5' : 'number1';
    }

    prev.addEventListener('click', function() {
        if (select.selectedIndex > 0) {
            select.selectedIndex--;
        }
        updateButtons();
    });

    next.addEventListener('click', function() {
        if (select.selectedIndex < select.options.length - 1) {
            select.selectedIndex++;
        }
        updateButtons();
    });

    updateButtons();
</script>