Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Since you say you're using AJAX, why not execute the function when you update the text. I'm not sure if you use any library, but in case it's jQuery just do:

 $.ajax({ ...,
          success: function() {
               ... other things ...
               ... setting div text ...
               calculateTotal();
                @Rafael Santos: Then this should do the job. Whatever happens on the PHP side, PHP just delivers the appropriate data which is out of scope for your problem.
– pimvdb
                Jul 13, 2011 at 8:40
As you are changing the text yourself, just call calculateTotal when the AJAX call completes and the text has been placed in the element.
Example (using jQuery):
$('#name').load('GetFragment.php', calculateTotal);
You can use 'onInput' instead of 'onChange'.
<div className="inputDiv" contenteditable="true" onInput={(e) => { console.log(e.currentTarget.textContent) }} />
Check the console log with Chrome Developer Tools (F12):
References:
https://stackoverflow.com/a/52614631/8706661
It's a bit over most webdesigners paygrade, but it's not any problem to monitor a div using the dom.
It's also pure vanilla javascript, so nothing required.
The most easy way to show it is with a example. The Div is editable so just click on it and type something and your javascript console will show what is going on. (if you don't know your way around the javascript debugger this might be to hard for you, so just learn it ;) )
<script>
        // Run the code once the DOM is created, think jquery $(function(){}); but HTML5
        document.addEventListener("DOMContentLoaded", function () {
            const commandlineDiv = document.getElementById('commandline');
            function mutationCallback(mutationsList, observer) {
                console.log(mutationsList);
                console.log(observer);
                for (const mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        console.log('A child node has been added or removed.');
                    } else if (mutation.type === 'attributes') {
                        console.log('The ' + mutation.attributeName + ' attribute was modified.');
                    } else {
                        console.log('mutation.type: ' + mutation.type);
                        console.log('New value ' + JSON.stringify(mutation.target.data));
            // Create an observer instance linked to the callback function
            const observer = new MutationObserver(mutationCallback);
            // What to observe
            const mutationConfig = { attributes: true, childList: true, subtree: true, characterData: true };
            observer.observe(commandlineDiv, mutationConfig);
</script>
</head>
<div id="commandline" contentEditable="true">commandline</div>
</body>
</html>
                Great example. The OP doesn't actually need this for his problem, but this is an actual answer to the question.
– Francisco Zarabozo
                Dec 9, 2021 at 21:51
Onchange is called when user changed input value. So answer is yes, but it will have no effect.
I assume you change content programmatically, so add simple code which will call this function
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.