You can use functions like JavaScript's document.getElementById('id-name') or jQuery's $('#id-name') from within you custom JavaScript function to access the HTML elements that makeup the current page, which then allows you to update those elements.
The following example uses Javascript to update a span element (with an ID of "counter") every 1/2 a second until the counter reaches 10.
1. Place the following within your project's Story Javascript area, it defines a count() function on the SugarCube setup object. It also uses the jQuery empty() function to remove the current content of the span element and then uses SugarCubes <jQuery>.wiki() function to add new content which can contain TwineScript markup.
setup.count = function () {
var el = $('#counter');
var x = 0;
var id = setInterval(function () {
if (x == 10) {
clearInterval(id);
} else {
x++;
el.empty().wiki(x);
}
}, 500);
};
2. Place the following within a Passage.
Counter: <span id="counter"></span>
<<button "Click Me">>
<<run setup.count()>>
<</button>>
3. Run the story and press the "Click Me" button to see the counter update.
Obviously your custom JavaScript function will be doing something else, but you should