Hide button if text found on page, but not if this text is also found on page-CodePudding

I have this working code which hides the "next" button on my checkout if customers have 'session 1 of 5', '2 of 5', '3 of 5' or '4 of 5'in their basket. Because I need them to add all 5 sessions to their basket before they can click "next"

How do I modify the code for it to also check if the page contains 'session 5 of 5' and therefore don't add class "hideElement"

Is it also possible to make this code run every couple of seconds continuously as they're navigating around a checkout system?

var itemCode = ["session 1 of 5", "session 2 of 5", "session 3 of 5", "session 4 of 5"];

var contains = itemCode.some(function(code) {
  return $(".bookly-cart-step").text().indexOf(code) >= 0;
});

if (contains) {
  $(".bookly-next-step").addClass("hideElement");
}

CodePudding user response：

This is usually something you would integrate with the basket logic directly but it looks like you are using a plugin so I'm going to guess this isn't possible in your specific case, hence your question.

The below snippet will give you an idea how you could check that all sessions are present using the every array method and disable/enable the submit button accordingly (by comparing against text content in a similar fashion as your original script).

Although I wouldn't advise checking against the text contents if you can check against the basket directly.

const sessions = ['session 1', 'session 2', 'session 3']
const searchTarget = document.querySelector('.target');
const submitButton = document.querySelector('.submit')

if (searchTarget.textContent.includes('session')) {
  if (!sessions.every((session) => searchTarget.textContent.includes(session))) {
    submitButton.setAttribute("disabled", "")
  } else {
    submitButton.removeAttribute('disabled')
  }
}

<div >session 1</div>
<button >test</button>

In terms of adding re-checking, you would be better off just calling the check function when a user completes a cart related action, you could use an event listener for this.

If this isn't possible you could use the mutation observer to check for the text changes, or use setInterval as a last resort since this could begin to impact performance.