Change display text with onclick events

[cbaldasa2]

Is it possible to update text with an onclick event?  I am trying to make a clock face that changes the displayed text with values from an array.  

index.js

let wordOne = ["","word1.1","word1.2"];
let wordTwo = ["","word2.1","word2.2"];
var word1 = document.getElementById("text_wordOne");
var word2 = document.getElementById("text_wordTwo");
var num = 1;
let img = document.getElementById("button_next");

img.onclick = (e) => {
if (num > 999 || 0) {
  num = 1
} else {
  num++;
}
const displayWords = document.getElementById("displayWords");
word1=wordOne[num];
word2=wordTwo[num];
console.log(num);
console.log(word1);
displayWords.animate("load");
}

 index.gui

<defs>
<symbol id="words">
  <image id="button_next" x="90%" y="70%" width="10%" height="10%" href="btn_combo_next_press_p.png" fill="white" pointer-events="visible"/>
  <text id="text_wordOne" x="47%" y="66%" >word1</text>
  <text id="text_wordTwo" x="47%" y="90%" >word2</text>
</symbol>
</defs>
<use id="displayWords" href="#words"/>
  

[Gondwana · Accepted solution]

You could try changing to

word1.text=wordOne[num]

 etc.

Only had a quick skim; there could be other issues.

[cbaldasa2]

word1.text=wordOne[num];
word2.text=wordTwo[num];

[cbaldasa2]

Thanks!  glad it was a simple fix

[Gondwana]

I see that you figured it out on your own first. 🙂