skip to Main Content

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

2

Answers


  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>
    Login or Signup to reply.
  2. Please be consistent – use DOM 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).parent().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>Message Here</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;
        if (!tgt.matches('.totalsTeal')) return;
        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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search