web

You’re offline. This is a read only version of the page.

Power Platform CommunityForums Power Pages - Customize & Extend Issues attempting to m...

Power Pages - Customize & Extend

Suggested answer

Issues attempting to manipulate the DOM on power page - support required

(0) Share

Report

Report

Posted on by CU24021146-0

2

I am working on a power page in a training environment.
On the page I am working on I have a basic form that has a multiselect choice column and a span (with id “total-due”) that displays some text (euro).
(Visible in screenshot_1)

I am looking to implement a 'calculate total amount' function that is triggered anytime a user selects a choice.
The span element with the id "total-due" will display the output of the function 'calculate total amount'.
The function would take the value selected in the multiselect choice column and calculate a price.

The issue I have is that I can't manipulate the textContent of the span (total-due) as the span is null when the script gets executed.
I tested this by writing a simple function that is executed when the page loads and logs the value of the span "total-due" to the console.
(Visible in screenshot_2)

The span 'total-due' is visible on the page and can even be inspected using the developer tools, yet the value of document.querySelector("#total-due"); in the console is null.
(Visible in screenshot_3)

What I have tried:

Adding a delay to the console log (using a setTimeout function)
Changing the function to window.load instead of document.ready

I am wondering why I am having this issue as the span definitely is inserted into the DOM at some point.
I am wondering if the elements in the dom are sometimes re-created via a callback function.

Many thanks

Categories:

screenshot_2.PNG

screenshot_1.PNG

screenshot_3.PNG

I have the same question (0)

All responses Img

All responses (3)

Answers Img

Answers (0)

Suggested answer

Fubar 8,122 Super User 2025 Season 2 on at

Like (0)

Report

Issues attempting to manipulate the DOM on power page - support required

What happens if you remove all the stuff (window,query etc) that is wrapped around it.

Where is your code that is creating the span?

Was this reply helpful? Yes No
CU24021146-0 2 on at

Like (0)

Report

Issues attempting to manipulate the DOM on power page - support required

Hi Fubar,

Thanks for your suggestion.

Unfortunately I had already tried using jquery and that function and I had the same issue

(screenshot 2)

screenshot_2.PNG

Was this reply helpful? Yes No
Suggested answer

Fubar 8,122 Super User 2025 Season 2 on at

Like (0)

Report
Issues attempting to manipulate the DOM on power page - support required

If the element in the DOM doesn't exist at the time your code runs then probably easier to use JQuery and put your code in a document ready block (if using pure JS then your code will need to be triggered after either document.onload or window.onload )

$( document ).ready(function() { console.log( $("#the_span_id").text() ); // or $("#spanid").html() });

Was this reply helpful? Yes No

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Join experts in person to explore low code and AI agents at the Power Platform Community Conference sponsored by Microsoft

Our Community Code of Conduct has been updated!

Responsible AI policies for the Community

Quick Links

Leaderboard > Power Pages

#1

Jon Unzueta 87 Super User 2025 Season 2

#2

Shafiuddin 45

#3

Fubar 44 Super User 2025 Season 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Microsoft Power Platform Community release plans