Changing element text via JS

Saola Animate Support Questions
1

Problem: I’m attempting to change a text element on an animated page, where the text (in editor) is different sizes. It shows as one element in Saola Animate, but the first portion of the element is (arbitrary number) size 120px, and the second half is size 80px. I need to change the element as a whole at runtime in browser as data is collected from an API call, referencing the text element by a name passed from the API call (for example receiving { “Colour”: “Sky Blue” } and changing the text element with the ID “Colour” to read “Sky Blue”), but I need to retain the sizing of the parts of the text element (so in the example, “Sky” would be larger than “Blue”).

Saola Animate version: 2.7.1

OS: Windows/Mac

Notes: I’m able to accomplish setting the text via doc.getElement(…).setText(…), however it obliterates the sizing altogether.

2

setText takes standard HTML / CSS so something like the following works:

doc.getElement("titleTB").setText("<span style='font-size:18px'>Hello </span><span style='font-size:40px'>World</span>");

3

Thanks for the info. I wasn’t sure if the setText(…) function was equivalent to .innerHTML =

4

setText is easier - but you can access the dom using doc.getElement("titleTB").dom and alter the HTML / CSS that way BUT it’s worth using developer tools to see what is going on with mark-up in the background first.