How to reference to a selected choice on the current page that hasn't been submitted yet?

Dear All

I am looking to take a respondent's currently selected (but not yet submitted) choice, perform a mathematical operation on it and then display it to the respondent on the same page as the question, so they can see the result before they submit their answers.

The code I am currently using (placed in the HTML view section of a subsequent question that is on the same page) (note: I don't actually attempt to perform the mathematical operation yet as the choice is not being pulled properly - this is merely meant to display their currently selected choice at the moment);

Code
<p id="test"></p>

<script>
var myVar = setInterval(myFunction, 2000);
function myFunction() {
var y = parseInt(${q://QID21/ChoiceNumericEntryValue/1});
document.getElementById("test").innerHTML="The value of y is " + y + ".";
}
</script>

Output

*After 2 seconds, "The value of y is NaN." appears on the screen and doesn't change if the value of q://QID21/ChoiceNumericEntryValue/1 is changed (but not submitted).

If I understood correctly, it is taking the value of q://QID21/ChoiceNumericEntryValue/1 when the page first loads and this is why it is being returned as undefined.

How can I instead make it refer to the currently selected choice, even if it has not yet been submitted? I was previously advised that using setInterval would be able to achieve this but am unsure on how to refer to the variable in a way that will cause it to update as the respondent updates their choice, instead of just continuously grabbing the (undefined) value from when the page first loaded.

Any help on this matter would be greatly appreciated.

The question is a constant sum question and q://QID21/ChoiceNumericEntryValue/1 is one of 10 inputs the respondent makes, if that makes any difference.