how to trigger the event if any change happens on the input field

Question

I have written a code which works on change but now I am also looking into page load and anything happens on the input field which has that specific class like blur or oninput ot paste or whatever, it should trigger the code and the moment the value is more than 0.00, it should run the code and display the label to block

Here is my code

  document.addEventListener('readystatechange', function(e) {
    switch (e.target.readyState) {
      case "complete":
        $('.totalsTeal').trigger('change');
        break;
      }
    });

and here is how the change event is written

  $(document).on('change focus blur', '.totalsTeal', function() {
    let self = $(this);
    let day = self.attr('data-name');
    if (self.val() === "0.00") {
      $('#w1_' + day).parent().find('label').css('display', 'none');
    } else {
      $('#w1_' + day).parent().find('label').css('display', 'block');
    }
});

the above code shows what I have done and what I am trying to write

Answer 1

Use the input event, which triggers when an input field receives any input.

This is really a trivial operation that really isn't made that much simpler with JQuery. Also, you should be using CSS classes instead of working with inline styles as inline styles are more difficult to override and can lead to duplication of code.

Place the following code within a <script> element and place that element just prior to the closing body tag and you're done.

// Get a reference to the element where the message will be
// FYI: A label is not meant for this.
const output = document.querySelector(".hidden");

// Set up an input event handler on the input field
// The event will trigger as any kind of input happens to the field
document.querySelector(".foo").addEventListener("input", function(e) {
  // All values that come from HTML are strings.
  // Prepending that string with + implicitly converts it to a number
  if(+this.value > 0){
     // Remove the hidden CSS class to reveal element
     output.classList.remove("hidden");
  } else {
     // Apply the hidden CSS class to hide the element
     output.classList.add("hidden");
  }
});

/* When possible, use CSS classes instead of  inline styles. */
.hidden { display:none; }

<input class="foo" type="number">
<div class="hidden">Message Here</div>

Answer 2

Please be consistent - use plain JS OR jQuery, please do not mix.

jQuery

$(function() {
  $('.totalsTeal').on('input', function() {
    console.log(this.value, this.value === '0.00')
    const day = $(this).data('name');
    $('#w1_' + day).closest('.parentDiv').find('label')
      .toggle(+$(this).val() !== 0)
  }).trigger('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="parentDiv">
  <input class="totalsTeal" type="number" value="1.00" data-name="x">
  <span id="w1_x">Not sure what wl is</span>
  <label hidden>Whatever the label is - I cannot tell until you post some HTML</label>
</div>
<div class="parentDiv">
  <input class="totalsTeal" type="number" value="0.00" data-name="y">
  <span id="w1_y">Not sure what wl is</span>
  <label  hidden>Message Here</label>
</div>
<div class="parentDiv">
  <input class="totalsTeal" type="number" value="1.00" data-name="z">
  <span id="w1_z">Not sure what wl is</span>
  <label  hidden>Message Here</label>
</div>

Vanilla JS

window.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('container')
  container.addEventListener('input', (e) => {
    const tgt = e.target.closest('.totalsTeal'); // in case it has children
    if (!tgt) return; // not a .totalsTeal or child thereof
    const day = tgt.dataset.name;
    console.log(day,`w1_${day}`)
    document.getElementById(`w1_${day}`).closest('div').querySelector('label').hidden = +tgt.value !== 0;
  });
  container.querySelectorAll('.totalsTeal').forEach(inp => {
    console.log(inp.value)
    inp.dispatchEvent(new Event('input', {
      bubbles: true,
      cancelable: true
    }));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div id="container">
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="0.00" data-name="x">
    <span id="w1_x">Not sure what wl is</span>
    <label hidden>Message Here</label>
  </div>
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="1.00" data-name="y">
    <span id="w1_y">Not sure what w1 is</span>
    <label hidden>Message Here</label>
  </div>
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="2.00" data-name="z">
    <span id="w1_z">Not sure what w1 is</span>
    <label hidden>Message Here</label>
  </div>
</div>