在标签中获取颜色选择器值

Question

我正在创建一个文本编辑器，到目前为止一切都很好，除了有点乱我不知道如何解决。

我需要将用户选择的颜色值获取到插入到 textarea 中的标签中。

我真的不知道如何使用 JSFiddle，但我想我可以分享一下：https://jsfiddle.net/ElenaMcDowell/mh9rfwct/

<script>//Color picker

//color picker

var theInput = document.getElementById("colorChoice");
var theColor = theInput.value;
theInput.addEventListener("input", function() {

document.getElementById("hex").innerHTML = theInput.value;
}, false);

//Tags

function btnEditor(h, a, i) { // helloacm.com
    var g = document.getElementById(h);
    g.focus();
    if (g.setSelectionRange) {
        var c = g.scrollTop;
        var e = g.selectionStart;
        var f = g.selectionEnd;
        g.value = g.value.substring(0, g.selectionStart) + a + g.value.substring(g.selectionStart, g.selectionEnd) + i + g.value.substring(g.selectionEnd, g.value.length);
        g.selectionStart = e;
        g.selectionEnd = f + a.length + i.length;
        g.scrollTop = c;
    } else {
        if (document.selection && document.selection.createRange) {
            g.focus();
            var b = document.selection.createRange();
            if (b.text != "") {
                b.text = a + b.text + i;
            } else {
                b.text = a + "REPLACE" + i;
            }
            g.focus();
        }
    }// helloacm.com
}

</script>

还有 HTML

<div class="fonts-box fonts-color" style="text-align: center;">
            <form>
                <input type="color" value="" id="colorChoice">
            </form> 
            <p id="hex" style="padding-bottom: 3px;"></p>
            <button id="colorSelect" onclick="btnEditor('ECEditor', '[color=#VALUEHERE]', '[/color]');">Select</button>
</div>
<textarea id="ECEditor" class="editor-textarea" name="editor-text"></textarea>

Answer 1

function btnEditor() { 

var but = document.getElementById('wrapper')
var color = document.getElementById('colorChoice').value
console.log(color)

but.innerHTML = '<button id=\"colorSelect\" onclick=\"btnEditor(\'ECEditor\', \'[color=' + color + ']\',\'[/color]\');">Select</button>'
   
}

/*
this answer
<button id="colorSelect" onclick="btnEditor('ECEditor', '[color=#000000]','[/color]');">Select</button>

your request
<button id="colorSelect" onclick="btnEditor('ECEditor','[color=#VALUEHERE]','[/color]');">Select</button>
*/

<div class="fonts-box fonts-color" style="text-align: center;">
            <form>
                <input type="color" value="" id="colorChoice">
            </form> 
            <p id="hex" style="padding-bottom: 3px;"></p>
            <span id = 'wrapper'>
            <button id="colorSelect" onclick="btnEditor();">Select</button></span>
</div>

Answer 2

const getCurrentColorPicker = () => {
  return document.getElementById("colorChoice").value;
};

function btnEditor(h, a, i) {
  console.log(getCurrentColorPicker());
  // helloacm.com

  var editor = document.getElementById(h);

  editor.value = a + getCurrentColorPicker() + i;

  // other code...
}