Show/hide a field depending on the value in another field (jQuery)

Issue

On my website, I would like to make a field hidden if the value in the shopping cart is zero. And accordingly, vice versa: if the value in the basket of goods is greater than zero, then the field is visible to the user.

I've already implemented the function, but I'm having problems with the condition. Tell me how to correctly write the condition in this case?

<script>
  $(document).ready(function() {
    function updateTextFieldVisibility() {
      var textField = $('#grid-2');


      if ($('#grid-12-12-12').val() > 0) {
        textField.show();
      } else {
        textField.hide();
      }
    }

  });
</script>

Solution

Is $('#grid-12-12-12') an HTML Element? You can check for it's value using .text() or innerText property

Also, consider using a "MutationObserver" to detect changes on elements as they happen (Instead of setInterval)

Here's an example:

function isElementEmpty(element) {
  return +element.innerText
}

// Target element
const targetElement = document.getElementById('grid-12-12');

// Create a Mutation Observer instance
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (isElementEmpty(targetElement)) {
      // hide your element
      // ...
    } else {
      // show your element
      // ...
    }
  });
});


// Start observing the target element
observer.observe(targetElement, {
  childList: true
});

// To disconnect the observer when needed
// observer.disconnect();

Answered By - IT goldman