javascript - 選択したドロップダウン値を onclick で背景色を変更する関数に渡す方法

Question

<script>    
myVar = document.getElementById('colorpick').value;

function color_click(myVar){
document.getElementById("touch").style.backgroundColor=myVar;
}
</script>
<select name="colorpick" id="colorpick">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</select>

<div id="touch" onclick="color_click(myVar);"> XXXXXXXXXXX </div>

このコードは、myVar の値を「青」に置き換えると期待どおりに機能しますが、要素をクリックして背景を変更する前に、ドロップダウン メニューから色を選択したいと考えています。

Answer 1

選択したオプションの値にアクセスする必要があります。そのためには、次のようなものが必要です。

function color_click(){
    var sel = document.getElementById('colorpick'),
    myVar = sel.options[sel.selectedIndex].value;
    document.getElementById("touch").style.backgroundColor=myVar;
}