CODEWITHSUNDEEP
typescriptsvgtextarea
Todd Davis
Todd Davis

Reputation: 6035

How to set TextArea.innerHTML via TypeScript in SVG

Here is a bit of SVG code that I'm trying to recreate using TypeScript. 

<svg>
    <switch>
        <g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
            <textArea width="200" height="auto">
            Text goes here
            </textArea>
        </g>
        <foreignObject width="200" height="200" 
        requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
            <p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
        </foreignObject>
        <text x="20" y="20">No automatic linewrapping.</text>
</switch>

For the most part I have this working, however I'm not sure how to insert the text into the TextArea (and Text) element(s). Here is what I want to do:

const textArea = document.createElementNS(this.xmlns, 'textArea');
textArea.setAttributeNS(null, 'width', '200');
textArea.setAttributeNS(null, 'height', 'auto');
//textArea.setAttributeNS(null, 'value', text);
textArea.innerHTML('Text goes here');

TypeScript doesn't like the innerHTML statement at all. It gives me the error: Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.

I'm not sure what this means, and how can I fix it? Somewhere I saw a post that said to just set the "value" to the text, which I tried, but it doesn't display the text in that case, it just becomes another parameter.

Thanks in advance for any advice you can offer.

Upvotes: 0

Views: 458

Answers (1)

tony19
tony19

Reputation: 138276

innerHTML is a string property (not a function), so you would set it like this:

textArea.innerHTML = 'Text goes here';

demo

Upvotes: 1

Related Questions