下拉列表和按鈕不起作用

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>

提示用戶選擇聚光燈的位置。 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; 
}

我希望用戶單擊“轉到位置”按鈕以更改聚光燈的位置。 但是，當我單擊按鈕時，沒有任何變化。 我想念什么？

Answer 1

您需要檢查onclick函數內部的選擇（答案）。 答案將被評估一次（除非不包括更多代碼），除非您告知，否則不會動態更新。

像這樣：

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

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