Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or after clicking the 'wpformButtonBack' button? This needs to be done without affecting the functionality of the 'progressNextReset' and 'progressBackReset' functions. Below, you will find 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 pixelPro...etc...
} else {
console.error('wpformButtonNext not found');
}
HTML markup via link view-source:
I am attempting to tweak the JavaScript code so that the "Next" button appears on 'wpforms-page' pages when an item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class, or after clicking the 'wpformButtonBack' button. It is crucial that the 'progressNextReset' and 'progressBackReset' functions remain functional as intended.