[Solved] How do I change my JavaScript to run on page load instead of event change

by


You have non-unique ID’s for elements – jQuery will not work. Change ID to class.

Also remove any reference to event (since there is no such thing on DOM ready).

I have converted your JS code to actual jQuery:

$(document).ready(function() {
  $('.numberofdaysperchosenfrequency').each(hideDays);
  
  $('.numberofdaysperchosenfrequency').on('change', hideDays);
});

function hideDays() {
    let parent = $(this).parent();
    parent.find('.daycol').show();
    parent
        .find(`.daycol:not([data-id="${$(this).val()}"])`)
        .hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>SET 01</strong><br>
<section>
  <label>Days (enter value 1 to 6): </label>
  <input type="text" class="numberofdaysperchosenfrequency" value="1">
  <div data-id="1" name="day1col" class="hide daycol">Day 1</div>
  <div data-id="2" name="day2col" class="hide daycol">Day 1 / Day 2</div>
  <div data-id="3" name="day3col" class="hide daycol">Day 1 / Day 2 / Day 3</div>
  <div data-id="4" name="day4col" class="hide daycol">Day 1 / Day 2 / Day 3 / Day 4</div>
  <div data-id="5" name="day5col" class="hide daycol">Day 1 / Day 2 / Day 3 / Day 4 / Day 5</div>
  <div data-id="6" name="day6col" class="hide daycol">Day 1 / Day 2 / Day 3 / Day 4 / Day 5 / Day 6</div>
</section>

<br>
<hr><br>

<strong>SET 02</strong><br>
<section>
  <label>Days (enter value 1 to 6): </label>
  <input type="text" class="numberofdaysperchosenfrequency" value="6">
  <div data-id="1" name="day1col" class="hide daycol">Day 1</div>
  <div data-id="2" name="day2col" class="hide daycol">Day 1 / Day 2</div>
  <div data-id="3" name="day3col" class="hide daycol">Day 1 / Day 2 / Day 3</div>
  <div data-id="4" name="day4col" class="hide daycol">Day 1 / Day 2 / Day 3 / Day 4</div>
  <div data-id="5" name="day5col" class="hide daycol">Day 1 / Day 2 / Day 3 / Day 4 / Day 5</div>
  <div data-id="6" name="day6col" class="hide daycol">Day 1 / Day 2 / Day 3 / Day 4 / Day 5 / Day 6</div>
</section>

2

solved How do I change my JavaScript to run on page load instead of event change