Forum Discussion
Anyone find a fix for JavaScript Text Color Change?
A knowledgeable member of the community helped me resolve why my color changing codes were not working for Shapes and Text. However, looks like both of us are a bit stuck on why this code only affect...
Found it, and here it is...
https://360.articulate.com/review/content/b95f42f6-332c-4045-a261-01acd91fc3e9/review
Im actually quite sure there will be situations where this will not work. Eg. text on a button is different...and there are quite some ways to use text in Storyline. I might walk through all text-options and fix this so you can use it on any text in any circumstance. But for now, for your case this sure will suffice.
I added a function in it i use for creating randomcolors.const parent = document.querySelector('[data-acc-text="text2Change"]'); gsap.to(parent, {duration:0.7,scale:1.5,transformOrigin:"top left"}); Array.from(parent.children).forEach((child, index) => { const txtSpan = child.querySelectorAll('tspan'); for (let i = 0; i < txtSpan.length ; i++) { txtSpan[i].style.fill = generateRandomColor(); } }); function generateRandomColor(){ let maxVal = 0xFFFFFF; // 16777215 let randomNumber = Math.random() * maxVal; randomNumber = Math.floor(randomNumber); randomNumber = randomNumber.toString(16); let randColor = randomNumber.padStart(6, 0); return `#${randColor.toUpperCase()}` }And offcourse the source file :-)
Thanks for the insight. I tried a few things and it seems to still behave when you change "texts" to "tspans" but does not effect the tspan differently.
On a search to my working code ;-)
Appreciate you - thank you. I look forward to your response, this is the last thing holding up my project! I am digging and have been trying things as well.
Broke down your code and here is the final for a one-color text change. Thank you again! You were extremely helpful.
const parent = document.querySelector('[data-acc-text="darkTxt"]');
Array.from(parent.children).forEach((child, index) => {
const txtSpan = child.querySelectorAll('tspan');
for (let i = 0; i < txtSpan.length ; i++) {
txtSpan[i].style.fill = "#FFFFFF";
}
});
