如何选定的下拉值传递给改变背景颜色的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

因为你想，当你点击的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; 
}