Forum Discussion

MattBotelho's avatar
MattBotelho
Community Member
18 days ago

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 affects the first line of text, and doesn't continue on? I am seeing codes online for targeting specific parts of a paragraph but this code of course, does not have one.

const texts = document.querySelectorAll('[data-acc-text="darkDescr"]');
texts.forEach(text => {
    const txt = text.querySelector('text');
    if (txt) {
      txt.style.fill = "#FFFFFF";
    }
  });

 

  • MathNotermans-9's avatar
    MathNotermans-9
    18 days ago

    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 :-)

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    18 days ago

    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 :-)

    • MattBotelho's avatar
      MattBotelho
      Community Member
      18 days ago

      This is great, thank you. I will give it a try shortly when I can return to the project. The buttons are not so much a problem because those I can bounce off the states, I only need this to affect my text box placeholders.

      I essentially have it working as

      When User Clicks "Theme Button"

      Toggle DarkMode (variable)

      When Variable Changes, if DarkMode = True, Execute JavaScript (This affects the Settings menu, blocks/tiles and Placeholder text objects in the Master Slide)

      When Variable Changes, Toggle DarkMode = True, Change State of "X" to Dark (This affects things like our company logo, background tint, and buttons)

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    18 days ago

    Thats because of the 'spans/tspans' Storyline generates for text. I do have code to target all spans and color all text.. now just find it ;-)

  • MattBotelho's avatar
    MattBotelho
    Community Member
    18 days ago

    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.

      • MattBotelho's avatar
        MattBotelho
        Community Member
        18 days ago

        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.

Related Content