# How to insert a text node with user input as text

**URL:** <https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595>\
**Category:** UXP Plugin API\
**Tags:** javascript\
**Created:** [February 9, 2020, 10:18am UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595 "2020-02-09T10:18:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![san](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/san/32/701_2.png) [@san](https://forums.creativeclouddeveloper.com/u/san)\
**Post date:** [February 9, 2020, 10:18am UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/1 "2020-02-09T10:18:05Z")

</div>

How to get text input from the user in our plugin on a text field and put them over the artboard ?  
I used inner html text field to get the input.  
If my text box id is #txt\_bx and the Function that I use for Text is

```auto
function createText(text, { color = "white" } = {}) {

          const { selection} = require("scenegraph");

          const { Text, Color } = require("scenegraph");

        

          const newText = new Text();

          newText.text = text;

          newText.fill = new Color(color);

                  

          selection.insertionParent.addChild(newText);

          newText.placeInParentCoordinates({x: 0, y: 0}, selection.insertionParent.localCenterPoint);

        

          return newText;

        }

```

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [February 9, 2020, 5:17pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/2 "2020-02-09T17:17:50Z")

</div>

Hi @san,

The code you show here works as expected. As long as `text` is definded and non-empty, a white point text node gets created.

Either, just overlooked the text node (it is white on a presumably white artboard, after all), or some other part of your code (not shown here) is where it breaks.

All in all, that’s all the help I can give you without further inormation. How (or where) do you call `createText()`?

Best,  
Pablo

PS: If I could ask for a favor: Please, in the future, use titles that say what your question is about. I assume you want help, so _Help me out with this!_ is redundant (or at least belongs into your text). Here, a suitable title might have been “How to insert text” or something like this. This allows others (and you and me, when we want to reference the topic) to search for it, reduce effort for moderating the forums etc. Also, I’m much more willing to help when I can quickly see what the topic is (generally) about without having to read all the text at first. Then, I can quickly decide if I’m able to help. Thank you very much in advance 🙂

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [February 9, 2020, 5:20pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/3 "2020-02-09T17:20:55Z")

</div>

I believe the problem is

> [@san](#):
>
> I used inner html text field to get the input.

Assuming your using a `<input />` element, its value is accessible via `.value`, not `.innerHTML`. Try using something like this and see if it works for you:

```js
const text = document.querySelector('#txt_bx').value;

createText(text);

```

---

<div class="post-metadata">

**Author:** ![san](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/san/32/701_2.png) [@san](https://forums.creativeclouddeveloper.com/u/san)\
**Post date:** [February 9, 2020, 5:41pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/4 "2020-02-09T17:41:46Z")

</div>

Sure, will do that. Sorry for the weird titles 🙏

---

<div class="post-metadata">

**Author:** ![san](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/san/32/701_2.png) [@san](https://forums.creativeclouddeveloper.com/u/san)\
**Post date:** [February 9, 2020, 5:42pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/5 "2020-02-09T17:42:51Z")

</div>

Thanks for that @pklaschka. I’ll try this if it works. 😄

---

<div class="post-metadata">

**Author:** ![san](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/san/32/701_2.png) [@san](https://forums.creativeclouddeveloper.com/u/san)\
**Post date:** [February 10, 2020, 11:47am UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/6 "2020-02-10T11:47:17Z")

</div>

Hi @pklaschka !  
I did this thing:  
My function is 🙂

```js

         function createText(text, { color = "white" } = {}) {
          const { selection} = require("scenegraph");
          const { Text, Color } = require("scenegraph");
          const text = document.querySelector('#txt_bx').value;
          const newText = new Text(text);
          newText.fill = new Color(color);
        
          selection.insertionParent.addChild(newText);
          newText.placeInParentCoordinates({x: 0, y: 0}, selection.insertionParent.localCenterPoint);
        
          return newText;
        }

```

And I called them by using :

```js
document.querySelector("#txt-b").addEventListener("click", createText);  

```

#txt-b is the id of Insert button in my plugin!

 ![Adobe-XD-2020-02-10-17-14-56](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/88cc6b56735bc26fc9e2e9948f9321a67e98ad67.gif)

What am I missing? Or what is the error ?

Full code is here :

```js

let dialog;
const commands = require("commands");
function quickStuff() {
  const html = `<style>
        #title{
          margin-bottom: 20px;
          font-weight: strong;
        }
        </style>
        <form method="dialog" id="main">
        <header class="row" id="title">
            <span font-size="30px">Quick Stuff</span>
        </header>
        </br>
        <section>
        <div class="row break">
            <label class="row" id="bg">
            <span>Choose Background</span>
            <button id="bg-b" type="button" uxp-variant="cta">Choose</button>
            </label>
        </br>
        </section>
        <section>
        <div class="row break">
            <label class="row" id="fg">
            <span>Choose Foreground</span>
            <button id="fg-b" type="button" uxp-variant="cta">Choose</button>
            </label>
        </br>
        </section>
        <section>
        <div class="row break">
            <label class="row" id="txt">
            <span>Foreground Text</span>
            <input type="text" uxp-quiet="true" id="txt_bx" value="" placeholder=""/>
            <button id="txt-b" type="button" uxp-variant="cta">Insert</button>
            </label>
        </br>
        </section>    
        </div>
        </div>
        <footer>
        <button id="ok" type="submit" uxp-variant="primary">Create</button>
        <button id="cancel" type="submit" uxp-variant="secondary" background-color:"#E54C4C" >Cancel</button>
        </footer>
        </form>
        `

      async function bgImage () {
          
         // User picks an image file
          const storage = require("uxp").storage;
          const fs = storage.localFileSystem;
          let imageFile = await fs.getFileForOpening({ types: storage.fileTypes.images });
        
        // Create ImageFill for this image
          const ImageFill = require("scenegraph").ImageFill;
          let fill = new ImageFill(imageFile);
        
          const {Rectangle} = require("scenegraph");
          const rect = new Rectangle();
          rect.width = 1920;
          rect.height = 1080;
        
          
        // Set fill of first selected item
          rect.fill = fill;
          const { selection} = require("scenegraph");
          selection.insertionParent.addChild(rect);
          selection.items = [rect];
        }
        
        async function fgImage () {
          
          // User picks an image file
           const storage = require("uxp").storage;
           const fs = storage.localFileSystem;
           let imageFile = await fs.getFileForOpening({ types: storage.fileTypes.images });
         
         // Create ImageFill for this image
           const ImageFill = require("scenegraph").ImageFill;
           let fill = new ImageFill(imageFile);
         
           const {Rectangle} = require("scenegraph");
           const rect = new Rectangle();
           rect.width = 1920;
           rect.height = 1080;
         
           
         // Set fill of first selected item
           rect.fill = fill;
           const { selection} = require("scenegraph");
           selection.insertionParent.addChild(rect);
           selection.items = [rect];
         }

         function createText(text, { color = "white" } = {}) {
          const { selection} = require("scenegraph");
          const { Text, Color } = require("scenegraph");
          const text = document.querySelector('#txt_bx').value;
          const newText = new Text(text);
          newText.fill = new Color(color);
        
          selection.insertionParent.addChild(newText);
          newText.placeInParentCoordinates({x: 0, y: 0}, selection.insertionParent.localCenterPoint);
        
          return newText;
        }
        
        function parallaxFinal(){
        
        }
        if (!dialog) {
          dialog = document.createElement("dialog");
          dialog.innerHTML = html;
          document.appendChild(dialog);
          document.querySelector("#bg-b").addEventListener("click", bgImage);
          document.querySelector("#fg-b").addEventListener("click", fgImage);
          document.querySelector('#txt-b').addEventListener('click', evt => createText(evt.target.value));
          document.querySelector("#ok").addEventListener("click", parallaxFinal);

      }
      return dialog.showModal()
  }

module.exports = {
  commands: {
    quickStuff
  }
}; 

```

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [February 10, 2020, 12:21pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/7 "2020-02-10T12:21:13Z")

</div>

```auto
document.querySelector("#txt-b").addEventListener("click", createText);  

```

Calls your function `createText` with the wrong arguments. It will call it and pass the click event as the first parameter, meaning text will not be a string, but an event. This will allow you to access the input element, e.g., using `evt.target` and its value with `evt.target.value`. The easiest option, here, would probably be to replace the above code with

```auto
document.querySelector('#txt-b')
  .addEventListener('click', evt => createText(evt.target.value));

```

---

<div class="post-metadata">

**Author:** ![san](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/san/32/701_2.png) [@san](https://forums.creativeclouddeveloper.com/u/san)\
**Post date:** [February 10, 2020, 4:05pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/8 "2020-02-10T16:05:07Z")

</div>

I did replace! But its not working 🙁  
I think the problem is with my function. Can you please revise them for errors?

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [February 10, 2020, 4:46pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/9 "2020-02-10T16:46:10Z")

</div>

Sorry, my bad. I somehow though about an event on a button (which doesn’t have a value). `evt.target` here is your button element, meaning instead of `evt.target.value`, you’ll have to determine the value of your `<input />` here, using something like `document.querySelector('txt-bx').value`.

The function is fine. I ran it and, as stated above, it does what it’s supposed to do (or at least the code works as expected, if creating white text is your goal 😉)

Sorry about that 🙂

---

<div class="post-metadata">

**Author:** ![san](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/san/32/701_2.png) [@san](https://forums.creativeclouddeveloper.com/u/san)\
**Post date:** [February 23, 2020, 2:40am UTC](https://forums.creativeclouddeveloper.com/t/how-to-insert-a-text-node-with-user-input-as-text/1595/10 "2020-02-23T02:40:07Z")

</div>

I figured out the solution for my code !

```auto

function createText() {
          const { selection} = require("scenegraph");
          const { Text , Color } = require("scenegraph");
          const newText = new Text();
          newText.text=document.querySelector("#txt_bx").value;
          selection.insertionParent.addChild(newText);
          newText.moveInParentCoordinates(0,0);
        
          //return newText;
        }

```

and then callling the function without any arguments  
createText() … worked well !