Changing text in a dynamic-textarea via JavaScript?

[sweet_potato]

Hi! I am working on a Fitbit app that will retrieve data (school lunch menu) from an external API. I implemented an error screen, and since error messages have different lengths, I thought I'd use a #dynamic-textarea for the error message.

However, I'm running into an issue. My code for the dynamic text area is:

 <use href="#dynamic-textarea" fill="white">
                    <set href="text" attributeName="text-buffer" to=""/>
                    <set href="text" attributeName="text-anchor" to="middle"/>
                    <set href="text" attributeName="id" to="error-message"/>
</use>

I tried to access the "error-message" ID via code and change it, but with no success:

document.getElementById("error-message")["text-buffer"] = message

 I also tried

document.getElementById("error-message").text = message

Any help is appreciated!

[Gondwana · Accepted solution]

I think there are a few issues.

• href needs #; eg, href="#text"
• Don't try to change the id of elements within a component; the system needs them to stay as they are.
• The <use> element needs an id to be accessible from JS.
• Setting text-length is needed if you want to replace the message set in SVG with something longer in JS.

Try this (untested):

<svg>
  <use id='myErrorMessage' href="#dynamic-textarea" fill="white">
                    <set href="#text" attributeName="text-buffer" to="My error"/>
                    <set href="#text" attributeName="text-anchor" to="middle"/>
                    <set href="#text" attributeName="text-length" to="64"/>
  </use>
</svg>

const el = document.getElementById('myErrorMessage')
console.log(`${el.text}`);
el.text = 'a new error'

[sweet_potato]

Hi!

I tried your solution and it worked! Thanks a lot. I thought I tried the proposed solution but apparently, I didn't.

Side note: It worked for me on other components to not use # in href, but I changed all my components to use it. Thanks!