如何將選定的下拉值傳遞給更改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>

當我用“ blue”代替myVar的值時，此代碼可以按預期工作，但是我想通過下拉菜單選擇哪種顏色，然后再單擊該元素以更改其背景。

Answer 1

因為您要在單擊div時通過下拉菜單獲取顏色，所以需要將

myVar = document.getElementById('colorpick').value;  

在color_click函數中。
您可以嘗試以下方法：

function color_click(){
    var myVar = document.getElementById('colorpick').value;
    document.getElementById("touch").style.backgroundColor = myVar;
}  

在你的div中：

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

希望對您有所幫助。

Answer 2

您需要訪問所選選項的值。 為此，您需要這樣的事情：

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