JS DOM: input color picker 🌈

By Xah Lee. Date: . Last updated: .

Color Picker Example

Value is:

Code

<div>
<label for="colorpick_YS5kR">Color:</label>
<input id="colorpick_YS5kR" type="color" value="#ff0000" />
</div>

<p>Value is: <span id="output_ghcpH"></span></p>
"use strict";
{
    const colorpick_YS5kR = document.getElementById("colorpick_YS5kR");
    if (colorpick_YS5kR === null)
        throw new Error("id colorpick_YS5kR missing");
    const output_ghcpH = document.getElementById("output_ghcpH");
    if (output_ghcpH === null)
        throw new Error("id output_ghcpH missing");
    const f_update = () => {
        output_ghcpH.textContent = colorpick_YS5kR.value;
    };
    colorpick_YS5kR.addEventListener("input", f_update);
    f_update();
}