Assigning a TextStim to a new variable then accessing the text attribute

Hello! I’m coding a computerized version of the symbol-digit modalities task, where the participant is asked to type in the number that corresponds to a symbol based on a key of 9 symbol-digit pairs.

URL of experiment: https://gitlab.pavlovia.org/zylee/c-sdmt_online/blob/master/html/sdmt_online.js

Description of the problem:
I am having trouble assigning the name and text attribute (i.e. value) of an existing TextStim to a new variable, and then accessing and evaluating the text attribute of it in each frame.

What I want to achieve is this: I want to present 9 symbols simultaneously per trial, and the participants will fill out the empty boxes below each symbol with the matching number. The input will automatically begin at the first text box, and automatically move onto the next when a number input is given. I was able to achieve this in PsychoPy3 (offline in Python code, see below) by having a variable called “currentText” which was used to assign the current TextStim that the participant is on. Then the code would evaluate, in each frame, whether the text attribute of currentText is a number and if it is, it would be assigned the next TextStim that needs to be filled. It would also store the answers in a list and compare them with the correct answers in the spreadsheet for the feedback routine.

This is the python code I used that works very well:
(https://gitlab.pavlovia.org/zylee/c-sdmt_online/blob/master/sdmt_online.py)

//Begin Routine:
currentText = text_10 //currentText begins at the very first TextStim in the trial
captured_string = ' ' //text input by user
textComps = [text_10, text_11, text_12, text_13, text_14, text_15, text_16, text_17, text_18]  //list of TextStim that need to be filled
i=0 //index to keep track of which TextStim we're on
prac_stored_ans = [] //list to store answers for feedback

//Clear generic text and return text component
//This is a function to check whether the currentText has been answered or not. ".." is the generic message each unfilled TextStim begins with, which gets erased when the input cursor moves to that TextStim.

def checkText(text):
    
    if text.text == "..":
        text.text = ' '
    return text

//Each Frame:
if currentText.text == "..":
    currentText = checkText(textComps[i])
if currentText != text_18 and currentText.text.isdigit():
    prac_stored_ans.append(currentText.text)
    i+=1
    currentText = checkText(textComps[i])
elif currentText == text_18 and currentText.text.isdigit():
    currentText = checkText(textComps[i])
    prac_stored_ans.append(currentText.text)
    continueRoutine = False

for key in event.getKeys():
    if key in ['escape']: 
        core.quit()
    elif key in ['delete','backspace']:
        if len(currentText.text) > 0:
            currentText.text = currentText.text[:-1]
    elif key in ['space','lshift','rshift','up','down','left','right']:
        pass
    else: 
        captured_string = captured_string+key
 
currentText.text += captured_string  // Add key press to text component
captured_string = ''  // Clear captured_string after each key press

I translated it to Javascript by creating a variable “currentText” and assigning to it a TextStim, i.e. currentText = text_10. When I tried to access the text attribute with “currentText.text”, it gave me a “TypeError: Cannot read property ‘text’ of undefined”, so I made currentText a new “visual.TextStim” but to no avail. Here are the relevant snippets from the JS code:

//this is before the RoutineBegin function of the trial
var currentText;

currentText = new visual.TextStim({
  win: psychoJS.window,
  name: 'currentText',
  text: text_10.text,
  font: 'Arial',
  units : undefined, 
  pos: undefined,  wrapWidth: undefined, ori: 0,
  color: undefined,  opacity: 1,
  depth: -5.0  
});

var captured_string = '';
var textComps = [text_10, text_11, text_12, text_13, text_14, text_15, text_16, text_17, text_18] //list of text input components
var i=0;
var prac_stored_ans = [];

function checkText(text) {
    if (text.text == "..") {
      text.setText = ''
    }
    return text;
}

//this is within the RoutineEachFrame function for the trial
let theseKeys = psychoJS.eventManager.getKeys();
  if (theseKeys.length > 0) {  // at least one key was pressed
    textAdd = theseKeys[theseKeys.length-1]; 
    }
    
  if (currentText.text === "..") {
      currentText = checkText(textComps[i]);
  }
  if (currentText != text_18 && !isNaN(currentText.text)) {
      prac_stored_ans.push(currentText.text); //add to array
      i = i+1;
      currentText = checkText(textComps[i]);
  }
  else if (currentText == text_18 && !isNaN(currentText.text)) {
      currentText = checkText(textComps[i]);
      prac_stored_ans.push(currentText.text); //add to array
      continueRoutine = false;
  }

  if (textAdd === 'backspace') {
      currentText.text = currentText.text.slice(0,-1);
      textAdd = undefined;
  } else if (textAdd !== undefined) {
      if (!isNaN(textAdd)) {
          captured_string = captured_string + textAdd;
      }
      textAdd = undefined;
  }
  currentText.text = currentText.text + textAdd;
  captured_string = '';

How can I assign an existing TextStim to a new variable, and then access and evaluate the text attribute of it in each frame? I’d greatly appreciate any pointers!