下拉列表和按钮不起作用

Question

我有HTML段：

<select id="myList">
<option value="1"selected="selected">Position 1</option>
<option value="2">Position 2</option>
<option value="3">Position 3</option>
<option value="4">Position 4</option>
<option value="5">Position 5</option>
</select>
<input type="submit" id="go" value="Go to Position"></input>

提示用户 select 聚光灯的位置。 JS端包含这个：

var select = document.getElementById("myList");
var answer = select.options[select.selectedIndex].value;

if (answer == "1") {
    document.getElementById("go").onclick = function () { ightAtX = -1.0; lightAtZ = 0.5; };
} else if (answer == "2") {
    document.getElementById("go").onclick = function () { lightAtX = -1.0; lightAtZ = -0.5; };
} else if (answer == "3") {
    document.getElementById("go").onclick = function () { lightAtX = 0.0; lightAtZ = -0.5; };
} else if (answer == "4") {
    document.getElementById("go").onclick = function () { lightAtX = 1.0; lightAtZ = -0.5; };
} else if (answer == "5") {
    document.getElementById("go").onclick = function () { lightAtX = 1.0; lightAtZ = 0.5; };
} else {
    return; 
}

我希望用户单击 'Go to Position' 按钮以更改聚光灯的位置。但是，当我单击按钮时，没有任何变化。我错过了什么？

Answer 1

您需要检查 onclick 函数内部的选择（答案）。答案被评估一次（除非有更多代码未包含），除非您告诉它，否则不会动态更新。

像这样：

document.getElementById("go").onclick = function () { 
    var select = document.getElementById("myList");
    var answer = select.options[select.selectedIndex].value;

   if (answer == "1") {
   }...
}

下拉列表和按钮不起作用

Drop down list and button not working

html

javascript

drop-down-menu