How to enable the 'Next' button when specific conditions are met in a JavaScript code for WP Forms

Question

How can I modify the provided JavaScript code to ensure that the "Next" button is shown only on pages where at least one item from the 'wpforms-icon-choices-item' class has the '.wpform-selected' class or on the page following a click on the 'wpformButtonBack' button, while preserving the existing functionality of the 'progressNextReset' and 'progressBackReset' functions? Additionally I provide the appropriate HTML markup for this code

Javascript:

const choiceItems = document.querySelectorAll('.wpforms-icon-choices-item');
const wpformsPage = document.querySelectorAll('.wpforms-page')
const wpformButtonNext = document.querySelectorAll('.wpforms-page-next');
const wpformButtonBack = document.querySelectorAll('.wpforms-page-prev');
const wpformsFields = document.querySelectorAll('.wpforms-field');
const wpformsIndicatorWrap = document.querySelector('.wpforms-page-indicator-page-progress-wrap');
const wpformsIndicatorProgress = document.querySelector('.wpforms-page-indicator-page-progress');
const wpformsIndicatorContainer = document.createElement('div');
wpformsIndicatorContainer.className = 'wpforms-page-indicator-container';
wpformsIndicatorProgress.appendChild(wpformsIndicatorContainer);
const wpformsIndicatorText = document.createElement('div');
wpformsIndicatorText.className = 'wpforms-page-indicator-text';
wpformsIndicatorContainer.appendChild(wpformsIndicatorText);
const wpformsIndicatorProgressWidth = Math.round(parseFloat(wpformsIndicatorProgress.style.width));
wpformsIndicatorText.innerText = wpformsIndicatorProgressWidth + '% geschaft';

for (var item = 0; item < choiceItems.length; item++) {
    const choiceItemOnHover = document.createElement('div');
    choiceItemOnHover.className = "wpforms-choices-header-onhover";
    const label = choiceItems[item].querySelector('.wpforms-icon-choices-label');
    choiceItemOnHover.innerText = label ? label.innerText : '';
    choiceItems[item].append(choiceItemOnHover);
}

wpformButtonNext.forEach((button) => {
    button.style.visibility = 'hidden'
});

function showButton() {

    // Toggle the class on wpformButtonNext elements based on the condition
    wpformButtonNext.forEach((button) => {
        button.style.visibility = 'visible'
    });
}

function hideButton() {

    const currentPageIndex = Array.from(wpformsPage).findIndex(
        (page) => page.getAttribute('data-page') === '1'
    );

    // Check if the current page has any item without 'wpforms-selected' class
    const isItemSelected = Array.from(wpformsPage[currentPageIndex].querySelectorAll('.wpforms-icon-choices-item')).some(
        (item) => !item.classList.contains('wpforms-selected')
    );

    // Toggle the visibility of wpformButtonNext elements on the current and next pages
    for (let a = 0; a < wpformButtonNext.length; a++) {
        if (a === currentPageIndex || a === currentPageIndex + 1) {
            // Check if the current page or next page
            if (isItemSelected) {
                console.log('7707');
                wpformButtonNext[a].style.visibility = 'visible';
            } else {
                console.log('666');
                wpformButtonNext[a].style.visibility = 'hidden';
            }
        }
    }
}

function progressNextReset() {
    const pixelProgressWidth = window.getComputedStyle(wpformsIndicatorProgress).getPropertyValue('width');
    const currentIndicatorWidth = window.getComputedStyle(wpformsIndicatorWrap).getPropertyValue('width');
    const percentageValue = Math.round((parseFloat(pixelProgressWidth) / parseFloat(currentIndicatorWidth)) * 100);
    const actualPercentValue = wpformsIndicatorProgressWidth + percentageValue;
    wpformsIndicatorText.innerText = actualPercentValue + '% geschaft';
    hideButton();
}

function progressBackReset() {
    const pixelProgressWidth = window.getComputedStyle(wpformsIndicatorProgress).getPropertyValue('width');
    const currentIndicatorWidth = window.getComputedStyle(wpformsIndicatorWrap).getPropertyValue('width');
    const percentageValue = Math.round((parseFloat(pixelProgressWidth) / parseFloat(currentIndicatorWidth)) * 100);
    const actualPercentValue = wpformsIndicatorProgressWidth - percentageValue;
    wpformsIndicatorText.innerText = -actualPercentValue + '% geschaft';
    showButton();
}

if (choiceItems) {

    for (var i = 0; i < wpformButtonNext.length; i++) {
        wpformButtonNext[i].addEventListener('click', progressNextReset);
    }
    for (var i = 0; i < wpformButtonBack.length; i++) {
        wpformButtonBack[i].addEventListener('click', progressBackReset);
    }
    for (var i = 0; i < choiceItems.length; i++) {
        choiceItems[i].addEventListener('click', progressNextReset);
    }

} else {
    console.error('wpformButtonNext not found');
}

HTML markup via link view-source:https://staging-new.deutsche-thermo.de/elementor-13377/

I try to modify JavaScript code to display the "Next" button on 'wpforms-page ' pages when any item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class, or after clicking the 'wpformButtonBack' button. Ensure that the 'progressNextReset' and 'progressBackReset' functions continue to function correctly

How to enable the 'Next' button when specific conditions are met in a JavaScript code for WP Forms

Answers (1)

Related Questions

How to enable the &#39;Next&#39; button when specific conditions are met in a JavaScript code for WP Forms

Answers (1)

Related Questions

How to enable the 'Next' button when specific conditions are met in a JavaScript code for WP Forms