I'm wondering how I can set the color of this text:

<p style="font-size: 30px; color: #222;" class="txt>Text example</p>

to the value selected on this color wheel:

<input type="color" value="#f6f82" id="colorPicker">

If the value of the color wheel changes, the text should adjust so the color is set to the value of the color wheel, how can this be done?

CodePudding user response：

It's just a matter of updating the style of text onchange of input.

add onchange attribute to the input field which can call a JavaScript method.

Define the JS method to get the value from input and set the text style.

const setTextColor = (value) => {
    document.querySelector('.txt').style.color = value;
};

<input type="color" value="#f6f82" id="colorPicker" onchange=setTextColor(value)>
<p style="font-size: 30px; color: #222;" class="txt">Text example</p>