# Problems with innerHTML and id/class

**URL:** <https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822>\
**Category:** UXP Plugin API\
**Tags:** api-feedback\
**Created:** [May 11, 2019, 11:03am UTC](https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822 "2019-05-11T11:03:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomzag](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/tomzag/32/2464_2.png) [@tomzag](https://forums.creativeclouddeveloper.com/u/tomzag)\
**Post date:** [May 11, 2019, 11:03am UTC](https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822/1 "2019-05-11T11:03:58Z")

</div>

Hello there,

I just created my first XD Plugin for testing purposes and run into some problems. The question is if I’m missing something or are these bugs?

The plugin uses a modal dialog with a range slider to change the opacity of an element.

You can find the full source code of the main.js here:

> <https://gist.github.com/tomzag/01405107c2319dedb0f3ff737024a337>

Finally, the plugin works. But first I used some other code (which you see now as comments in the gist).  
See line 49 - 54.

- Line 52: Here I tried to set the innerHTML. The console returned “Plugin TypeError: this.html.charCodeAt is not a function”. I managed to get it to work with jQuery.

- Line 54: If I use here id instead of class it will only work the first time the modal dialog is opened.  
To reproduce:

1. Change line 40 to id instead of class
2. Change line 54 to ('#opacity') instead (’.opacity’)
3. Run the plugin
4. The value of the slider will update correctly
5. Dismiss the modal dialog
6. Reopen the plugin
7. The value of the slider will NOT update correctly

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [May 11, 2019, 4:53pm UTC](https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822/2 "2019-05-11T16:53:12Z")

</div>

I think the issue is down to how dialogs are being handle – dialog elements are _not_ removed from the DOM after they are closed unless you do so explicitly. This means that when you look up elements by class or ID, you may in fact be getting a previously created element.

There are two ways around this:

1. Remove the dialog when it is closed. One easy way to do this is `mainDialog.showModal().then(() => mainDialog.remove());`
2. Only create the main dialog _once_. You can execute `showModal` any number of times and any existing DOM elements will be shown, so you can create the dialog once, and if it already exists just show it again.

See if that helps, and LMK if you have any questions.

---

<div class="post-metadata">

**Author:** ![tomzag](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/tomzag/32/2464_2.png) [@tomzag](https://forums.creativeclouddeveloper.com/u/tomzag)\
**Post date:** [May 11, 2019, 5:48pm UTC](https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822/3 "2019-05-11T17:48:56Z")

</div>

Oh, that makes sense and works perfectly. Thanks!

What about the innerHTML issue?

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [May 13, 2019, 2:30pm UTC](https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822/4 "2019-05-13T14:30:19Z")

</div>

`innerHTML` _should_ work, but I wonder if jQuery is getting in the way. What version are you using?

---

<div class="post-metadata">

**Author:** ![tomzag](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/tomzag/32/2464_2.png) [@tomzag](https://forums.creativeclouddeveloper.com/u/tomzag)\
**Post date:** [May 13, 2019, 2:42pm UTC](https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822/5 "2019-05-13T14:42:56Z")

</div>

Version 3.3.1  
I only used jQuery because the innerHTML not worked.

---

<div class="post-metadata">

**Author:** ![tomzag](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/tomzag/32/2464_2.png) [@tomzag](https://forums.creativeclouddeveloper.com/u/tomzag)\
**Post date:** [May 13, 2019, 2:52pm UTC](https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822/6 "2019-05-13T14:52:14Z")

</div>

Found the issue. innerHTML needs a String. It won’t work with Number.

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [May 13, 2019, 6:34pm UTC](https://forums.creativeclouddeveloper.com/t/problems-with-innerhtml-and-id-class/822/7 "2019-05-13T18:34:09Z")

</div>

Dang – nice catch! I hadn’t caught that it was a number. So we have a bug where we aren’t converting to a string, it looks like, although Chrome Dev Tools has some very interesting behavior when you try to assign numbers directly to `innerHTML` as well.
