Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Pages - Customize & Extend
Suggested answer

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

(0) ShareShare
ReportReport
Posted on by 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:
  • Suggested answer
    Fubar Profile Picture
    8,010 Super User 2025 Season 1 on at
    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?
  • CU24021146-0 Profile Picture
    2 on at
    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)

  • Suggested answer
    Fubar Profile Picture
    8,010 Super User 2025 Season 1 on at
    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()
    
    
    });
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard > Power Pages

#1
Lucas001 Profile Picture

Lucas001 60 Super User 2025 Season 1

#2
Fubar Profile Picture

Fubar 55 Super User 2025 Season 1

#3
surya narayanan Profile Picture

surya narayanan 35

Featured topics