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

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