cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

Cannot read property 'addEventListener' of null at HTMLDocument

On a Web Form I have a dropdown menu and next to it a label with text field.  I have used JavaScript and hidden the label and text field.  This works fine. What I want to happen is that if a user selects the value "Other", the hidden label and 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 fire until the dropdown menu is loaded?  I have tried using 'DOMContentLoaded' on both the window and document 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.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Skilled Sharer
Skilled Sharer

Re: Cannot read property 'addEventListener' of null at HTMLDocument

Hi @Jim01 , 

 

If I've got this right, and you try to manipulate the DOM of a form: that's unuspported. Even if you get it to work, it might break any time, since it might change.

The supported way to implement that, is using a PCF. You could hide the label in customizing, and make your own  label inside the PCF. Then you have the control, when it should be displayed.

 

Best regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

7 REPLIES 7
Highlighted
Skilled Sharer
Skilled Sharer

Re: Cannot read property 'addEventListener' of null at HTMLDocument

Hi @Jim01 , 

 

If I've got this right, and you try to manipulate the DOM of a form: that's unuspported. Even if you get it to work, it might break any time, since it might change.

The supported way to implement that, is using a PCF. You could hide the label in customizing, and make your own  label inside the PCF. Then you have the control, when it should be displayed.

 

Best regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

Highlighted
Helper I
Helper I

Re: Cannot read property 'addEventListener' of null at HTMLDocument

@DianaBirkelbach ,

 

Thank you very much for the help.  It's odd that they have a place for custom JavaScript but manipulating the DOM isn't supported.  I will look into PCF's.   

Highlighted
Helper I
Helper I

Re: Cannot read property 'addEventListener' of null at HTMLDocument

@DianaBirkelbach ,

 

I see where PCFs are in preview mode for canvas apps and can be used with model-driven apps but there is no mention of portal apps. Do you know if they can be used with portal apps and web forms?

Highlighted
Skilled Sharer
Skilled Sharer

Re: Cannot read property 'addEventListener' of null at HTMLDocument

Hi @Jim01 , 

You can use JavaScript, but only what's in the sdk is supported: https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/client-scripting.  Maybe the best-practices will help too: https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/best-practices/business-logic... 

 

I apologize, I've just read again your issue. Is not about hiding only the label, you want to hide the whole "text-control". You can do that using the sdk (JavaScript) using : Control.setVisible(true/false): https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/controls/...

 

The No-Code alternative for that, is using Business Rules. Then you don't need code at all.

 

Best regards,

Diana

Highlighted
Helper I
Helper I

Re: Cannot read property 'addEventListener' of null at HTMLDocument

@DianaBirkelbach 

 

Unfortunately, business rules are not supported in web forms or portal apps

Highlighted
Skilled Sharer
Skilled Sharer

Re: Cannot read property 'addEventListener' of null at HTMLDocument

Hi @Jim01 ,

Och.. you mean Portals...? My bad, I should have asked the target in the first place.

No, the PCFs are not available for Portals right now, and unfortunately I cannot help there.

Maybe you can reopen the Issue. I apologize for messing your thread up.

Best regards,

Diana

Highlighted
Helper I
Helper I

Re: Cannot read property 'addEventListener' of null at HTMLDocument

@DianaBirkelbach ,

 

No worries. I should have specified.  I'm a complete newbie to PowerApps and forget that there are three different types of applications.

Helpful resources

Announcements
secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (7,215)