カラーパレットによる文字色の変更

Question

実現したいこと

カラーパレットによる文字色の変更

前提

<input type="color">で作成したカラーパレットから色を選択し、その色をテキストボックスの文字色に反映させたいと考えております。
パレットに表示された色をクリックした時点でテキストの文字色が即時変更されるようにしたいのですが、実際は色選択後にカラーパレットをクリックし直す必要があり、期待した動きになりませんでした。

発生している問題・エラーメッセージ

・以下のソースコードではパレットで選択した色が即時反映されない。

該当のソースコード

function changeColor(element) {
        var newColor = document.getElementById(element.id).value;
        document.getElementById('textId').style.color = newColor;
}

<input type="text" id="textId" value="テキスト" >

<input type="color" id="colorId" list="tlist" value="#ff0000" onclick="changeColor(this)">
            <datalist id="tlist">
            <option value="#000000" id="black"></option>
            <option value="#8b4513" id="saddlebrown"></option>
            <option value="#ff0000" id="red"></option>
            <option value="#ff00ff" id="magenta"></option>
            <option value="#ee82ee" id="violet"></option>
            </datalist>

試したこと

・色のクリックを行った時点で反映させるため、onclick="changeColor(this)"の<option>タグ内への記載も試しましたが、作動しませんでした。

Answer 1

onclick="changeColor(this)">

onclick はクリックされたときに呼ばれるものですから、不適切です。値が変わっったときに呼ばれる　oninput や onchange の方がよいでしょう。

Comments

[stingray223]

onclickをonchangeに変更したところ、期待通りの動作になりました。迅速なご回答ありがとうございました。