Changing colour of textboxes

Hi Keith,

I am just curious, why would you need a javascript to change the color of a textbox when you click a button? You can easily achieve that by using simple SL triggers. Check my video example.  Sorry if I misunderstood your post.

Yes you can.  I've done it before by using the variable code and something like "color=#hex number".  But it was a while ago.  You'll have to target the text box, possibly using the the "alt text" for the object ID and target it with javascript and css. 

I’m assuming that you want one option to change all text boxes at once. Otherwise, as Nedim suggests, you want to use staters. Use the Selected state, and a click changes it, and the next changes it back, without triggers. Include “click to change text background color” in the overall instructions.

Like Jerson says, you can use javascript, but you have to write a script for each box.

I would create Text box with the second state as the selected state. Then I would right click it and set it as the default. If that works, Bob’s your uncle, but I have read of people that have not always had good results using the default option. In that case, create the first box, and duplicate it for all succeeding boxes. Nevertheless, it’s worth a try.

If the project is already underway, create the Selected state, and try using the format painter. It doesn’t always work the way you predict,  but if it does, it is a pretty quick to spread that state.  You still have to change each box individually.

You can achieve that with JS where you can change all text boxes given that you assign them the same "Alt name". Then Execute JS when the user clicks the button (video attached). Tricky part is to target the text color due to the complex SL Html structure. It's not a fontColor, it's a fill that needs to be targeted instead. But again I would always prefer SL solution or similar to Walt has suggested above. Although JS solution is quicker. Here is the code:

const texts = document.querySelectorAll('[data-acc-text="text"]');

texts.forEach(text => {
    const txt = text.querySelector('text');
    if (txt) {
      txt.style.fill = '#C0504D';
    }
  });

Hi Nedim,

Thanks your reply. I used your example:-

const texts = document.querySelectorAll('[data-acc-text="text"]');

texts.forEach(text => {
    const txt = text.querySelector('text');
    if (txt) {
      txt.style.fill = '#C0504D';
    }
  });

and it works a treat!

BUT, how exactly did you get your first example to work where you can change the background colour of your box?

Thanks!

Updated script:

const texts = document.querySelectorAll('[data-acc-text="text"]');

texts.forEach(text => {
    text.style.backgroundColor = '#ab34de' //change the background color of the text box
    const txt = text.querySelector('text');
    if (txt) {
      txt.style.fill = '#C0504D';
    }
  });