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

I am having difficulty running my JavaScript code on page load. I do not know enough about JavaScript to find the right option.

The code below works fine for a 'change' event, however I want the code to run at the time of loading and use the default values of the input fields to show the relevant divs.

I have tried changing the first line of the JavaScript to the following options with no success:

jQuery(document).ready('onload', e => {
window.addEventListener('load', e => {
document.addEventListener('DOMContentLoaded', e => {

Here is a fiddle to play with: JSFIDDLE >

JavaScript :

document.addEventListener('change', e => {
  if (e.target.name == 'numberofdaysperchosenfrequency') {
    let parent = e.target.parentNode;
        parent.querySelectorAll('#daycol').forEach(n => n.style.display = 'none');
        
    if (e.target.value) parent.querySelector(`[data-id="${e.target.value}"]`).style.display = 'block';
  }
})

HTML:

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

CodePudding user response：

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"  value="1">
  <div data-id="1" name="day1col" >Day 1</div>
  <div data-id="2" name="day2col" >Day 1 / Day 2</div>
  <div data-id="3" name="day3col" >Day 1 / Day 2 / Day 3</div>
  <div data-id="4" name="day4col" >Day 1 / Day 2 / Day 3 / Day 4</div>
  <div data-id="5" name="day5col" >Day 1 / Day 2 / Day 3 / Day 4 / Day 5</div>
  <div data-id="6" name="day6col" >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"  value="6">
  <div data-id="1" name="day1col" >Day 1</div>
  <div data-id="2" name="day2col" >Day 1 / Day 2</div>
  <div data-id="3" name="day3col" >Day 1 / Day 2 / Day 3</div>
  <div data-id="4" name="day4col" >Day 1 / Day 2 / Day 3 / Day 4</div>
  <div data-id="5" name="day5col" >Day 1 / Day 2 / Day 3 / Day 4 / Day 5</div>
  <div data-id="6" name="day6col" >Day 1 / Day 2 / Day 3 / Day 4 / Day 5 / Day 6</div>
</section>