Power Platform Community Forum Thread Details

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

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