Create a jscolor button using JavaScript

Asked Jun 29 '20 at 15:42

Active Jun 29 '20 at 16:16

Viewed 27 times

I am trying to create a jscolor button using only JavaScript, without starting the page it is in the DOM. I have looked at the examples on the web and the one that most resembles it in HTML is this

<button id="jscolor_prova" data-jscolor="{closeButton:true, closeText:'Change', preset:'large dark', value:'#00CC66'}"></button>

but when I try to create one button with the same features as this it doesn't let me access the data-jscolor attribute from JavaScript. I looked for an API to experiment which this but I can't find any.

Before the last version, the characteristic of jscolor came through the class and it was easier to modify but now they have changed it to this way and I don't know how to achieve that purpose.

The code that I'm trying to replicate is something like this:

function createJscolorButton() {
    var btnDiv = document.getElementById("div_button_jscolor");
    var btn = document.createElement("button");
    btn.id="jscolor_created_js";
    btn.data-jscolor="{closeButton:true, closeText:'Change', preset:'large dark'}";
    btnDiv.appendChild(btn);
}

createJscolorButton();

but when I execute this script I get the following error:

Uncaught SyntaxError: Invalid left-hand side in assignment

edited Jun 29 '20 at 16:16

Heretic Monkey

11,687
7
53
122

asked Jun 29 '20 at 15:42

atp

1

Please post the javascript code you tried that didn't work – ibrahim mahrir Jun 29 '20 at 15:45
Ok, I updated the question with the code – atp Jun 29 '20 at 16:07
Replace `btn.data-jscolor = ...` with `btn.dataset.jscolor = ...` (that's how you add data attributes). Does it work now? – ibrahim mahrir Jun 29 '20 at 16:32
1

I used the recomended btn.setAttribute("data-jscolor","{...}"); and it works like a charm. Thank you! – atp Jun 29 '20 at 16:35

Create a jscolor button using JavaScript

0 Answers0