Multiple Javascript Event Listener Issues

Question

Background info: I'm using WooCommerce and Gravity Forms, and trying to make it so the Add to Cart button is inactive according to two conditions - either there are no attendees registered, or the date hasn't been selected from the product variation dropdown. The user should only be able to move forward if both sections are completed.

The Gravity Forms component of this has a popup module to sign up those attendees, but the summary is displayed outside the module and on the main product page. The class.gpnf-no-entries lives on the "outside" of the Gravity Forms module, since it's always visible on the page. .gpnf-nested-entries and.gpnf-row-actions are also outside the module, but rely on information from within the module. .tingle-btn is a class used on multiple buttons inside the module - to add an attendee, cancel editing, or delete that attendee (unsure if I need a loop on here - alerts were working without one, and it seems like there's something else causing issues regardless).

Issues: It was working at one point, but only after the second click (anywhere on the page). There's also a second issue - on this form, if you've added an attendee but not added the product to the cart, the page retains any info you've put in. So what happens is, if you refresh the page and have old attendee info already there, the Add to Cart never gets clickable after selecting a date, even though both areas are filled out.

Screenshots:

I'm still somewhat of a beginner here so it's quite possibly something silly.

<script>

    var modalButtons = document.querySelectorAll('.tingle-btn');
    var noEntries = document.querySelector('.gform_body .gpnf-no-entries');
    var entryField = document.querySelectorAll(".gpnf-nested-entries .entry-field[style='display: block;']");
    var nestedEntriesDelete = document.querySelector('.gpnf-row-actions .delete');
    var addToCart = document.querySelector('.single_add_to_cart_button');
    var wcVariation = document.querySelector('.woocommerce-variation-add-to-cart');
    var selectCheck = document.querySelector('#select-date-option');
    
//When date selection dropdown is changed, check value and check for "no entries" message
document.addEventListener('change', function (event) {  
    
    if (!event.target.matches('selectCheck')) {
        if ((noEntries.style.display !== 'none') || (selectCheck.value === ''))  {
            addToCart.classList.add('disabled');
            wcVariation.classList.remove('woocommerce-variation-add-to-cart-enabled');
            wcVariation.classList.add('woocommerce-variation-add-to-cart-disabled');
        }
        else {
            addToCart.classList.remove('disabled');
            wcVariation.classList.add('woocommerce-variation-add-to-cart-enabled');
            wcVariation.classList.remove('woocommerce-variation-add-to-cart-disabled');
        }
    }

}, false);  

// When attendee is deleted, check to see if there are any entry fields left
document.addEventListener('click', function (event) {   
    
    if (!event.target.matches('nestedEntriesDelete')) {
        if (entryField.length <= 3)  {
                    addToCart.classList.add('disabled');
                    wcVariation.classList.remove('woocommerce-variation-add-to-cart-enabled');
                    wcVariation.classList.add('woocommerce-variation-add-to-cart-disabled');
            }
    }

}, false);

// Check for "no entries" and no date selection value when buttons to add or remove attendees are clicked
document.addEventListener('click', function (event) {   
    
    if (!event.target.matches('modalButtons')) {
         if ((noEntries.style.display !== 'none') || (selectCheck.value === '')) {
            addToCart.classList.add('disabled');
            wcVariation.classList.remove('woocommerce-variation-add-to-cart-enabled');
            wcVariation.classList.add('woocommerce-variation-add-to-cart-disabled');
        }
        else {
            addToCart.classList.remove('disabled');
            wcVariation.classList.add('woocommerce-variation-add-to-cart-enabled');
            wcVariation.classList.remove('woocommerce-variation-add-to-cart-disabled');
        }
    }

}, false);
    
    
</script>

Answer 1

I ended up doing this a much simpler way by adding classes:

<script>

var noEntries = document.querySelector('.gform_body .gpnf-no-entries');
var entriesContainer = document.querySelector('.gpnf-nested-entries-container');
var addToCart = document.querySelector('.single_add_to_cart_button');

//When page is fully loaded, check for cached entries
window.addEventListener('load', function () {
      //if there are entries, show the add to cart button
      if (noEntries.style.display === 'none'){
            entriesContainer.classList.add('has-entries');
            addToCart.classList.add('do-add');
            addToCart.classList.remove('dont-add');
        }
      //if there are no entries, disable the add to cart button
      else if (noEntries.style.display === ''){
            entriesContainer.classList.remove('has-entries');
            addToCart.classList.add('dont-add');
            addToCart.classList.remove('do-add');
        }
      //if the form isn't present, don't do any of this
      else if (noEntries = 'null'){
            //do nothing
        }
});     

//When the container with the form and the entries is clicked, check for entries
document.addEventListener('click', function (event) {   
    if (!event.target.matches('#gform_wrapper_41')) {
        setTimeout(function() {
            //if an entry is added, show the add to cart button
            if (noEntries.style.display === 'none'){
                    entriesContainer.classList.add('has-entries');
                    addToCart.classList.add('do-add');
                    addToCart.classList.remove('dont-add');
                }
            //if all entries are removed, disable the add to cart button
          else if (noEntries.style.display === ''){
                entriesContainer.classList.remove('has-entries');
                addToCart.classList.add('dont-add');
                addToCart.classList.remove('do-add');
            }
        },2000);
    }
}, false);

</script>