Q&A
実現したいこと
カラーパレットによる文字色の変更
前提
<input type="color">で作成したカラーパレットから色を選択し、その色をテキストボックスの文字色に反映させたいと考えております。
パレットに表示された色をクリックした時点でテキストの文字色が即時変更されるようにしたいのですが、実際は色選択後にカラーパレットをクリックし直す必要があり、期待した動きになりませんでした。
発生している問題・エラーメッセージ
・以下のソースコードではパレットで選択した色が即時反映されない。
該当のソースコード
JavaScript
1function changeColor(element) { 2 var newColor = document.getElementById(element.id).value; 3 document.getElementById('textId').style.color = newColor; 4}
html
1<input type="text" id="textId" value="テキスト" >
html
1<input type="color" id="colorId" list="tlist" value="#ff0000" onclick="changeColor(this)"> 2 <datalist id="tlist"> 3 <option value="#000000" id="black"></option> 4 <option value="#8b4513" id="saddlebrown"></option> 5 <option value="#ff0000" id="red"></option> 6 <option value="#ff00ff" id="magenta"></option> 7 <option value="#ee82ee" id="violet"></option> 8 </datalist>
試したこと
・色のクリックを行った時点で反映させるため、onclick="changeColor(this)"の<option>タグ内への記載も試しましたが、作動しませんでした。
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/02 05:54