Cannot read property 'addEventListener' of null at HTMLDocument

[Jim01]

On a Web Form I have a dropdown menu control and next to it a label with input field.  I have used JavaScript and hidden the label and input field.  This works fine. What I want to happen is that if a user selects the value "Other" from the dropdown menu, the hidden label/text field will appear.  The problem is that I receive the above error.  I believe that it is happening because the JavaScript is firing prior to the dropdown menu being loaded.  The question is, how do I get the JavaScript function to not produce the error?  I have tried using 'DOMContentLoaded' on both the window and document in the hopes that the function would be ignored until after the form was loaded but neither work.

Here is the HTML of the Dropdown menu:

<td colspan="1" rowspan="1" class="clearfix&#32;cell&#32;picklist-cell">
  <div class="info&#32;required">
    <label for="cr646_patientcountryoforigin" id="cr646_patientcountryoforigin_label">Patient Country of Origin</label>
    <div class="validators">
      <span id="RequiredFieldValidatorcr646_patientcountryoforigin" style="display:none;">*</span>
    </div>
  </div>
  <div class="control">
    <select name="ctl00$ContentContainer$WebFormControl_7379188406a5ea11a812000d3a569fe1$EntityFormView$cr646_patientcountryoforigin" id="cr646_patientcountryoforigin" class="form-control&#32;picklist&#32;" onchange="setIsDirty(this.id);" required="" aria-invalid="true">
      <option value="" label="&#32;"></option>
      <option value="459490000">United States</option>
      <option value="459490001">Other</option>
      <option selected="selected" value="459490002">-- Select --</option>
     </select>
  </div>
</td>

and here is my JavaScript.  I put it In the "Form Options" section of my Web Form Step.

document.addEventListener('DOMContentLoaded', () => { 
  document.getElementById('#crc646_patientcountryoforigin').addEventListener('change', () => {
    console.log('You selected: ', this.value);
    /*if(this.value == '459490001') {
      $('table.section > tbody > tr').eq(2).children('td').eq(2).show();
    }*/
  });
});

 As you can see, for now I just have it going to the console so I can verify that my value is correct but it doesn't even get that far. Any advice would be appreciated.

[hardikv · Accepted solution]

Hi,

Can you add below code in Web Form javascript section:

$(document).ready(function(){

	$("#cr646_patientcountryoforigin").change(function () {
        // Get value of your trigger field
        let currentVal = $("#cr646_patientcountryoforigin option:selected").val();

        //do some validation
        if(currentVal == "459490001") {
            $('table.section > tbody > tr').eq(2).children('td').eq(2).show();
        } else {
            
        }
    });
 });

[Jim01]

Hi @hardikv,

That did it!  Thanks!  I guess I'm going to have to brush up on my JavaScript.  It's been awhile.

[hardikv]

Hi, Great! Can you please mark as solution? So, this answer can be helpful to someone.

Thanks! 

[Jim01]

Done. Thanks again