在 'document.getElementById("...")' 中使用变量作为 ID 以减少重复的代码

Question

我用JavaScript为桌面RPG编写了一个掷骰子实用程序。

在添加更多功能之前，我想通过简化函数来删除不必要的代码来简化代码。

使用滚筒时，可以通过菜单改变滚筒的一些设置。每个菜单都有自己的函数，使用document.getElementById将选中的值拉入一个全局变量。

有8个这样的菜单。但是我需要添加更多的菜单来添加更多的功能。我想修改这个滚轮的代码，用同样的系统为其他游戏制作滚轮。(id和变量的名称会改变)

不是为每个菜单创建一个新函数，是否可以将菜单的ID拉到一个可以插入到document.getElementById中的变量中?例如，而不是:

MoonSettingSelected = document.getElementById("MoonPhaseMenu");

的代码可能是:

let SelectedSetting = document.getElementById("SelectedMenu");

我尝试使用QuerySelectorAll从菜单中提取数据，但发现使用getElementById更容易。

第一次使用JavaScript。

下面的示例代码可以在CodePen上找到。

<div class="centre RageOptions">
<select id="MoonPhaseMenu" onclick="SetMoonPhase()" class="menu shadow">
<option value="9999" selected>Moon phase</option>
<option value="1">Full</option>
<option value="2">Crescent</option>
<option value="3">Half</option>
<option value="4">Gibbous</option>
<option value="5">New</option>
</select>
</div>
<p>&nbsp</p>
<div>
<div class="centre RageOptions">
<select id="AuspiceMenu" onclick="SetAuspice()" class="menu shadow">
<option value="9999" selected>Auspice</option>
<option value="1">Ahroun</option>
<option value="2">Theurge</option>
<option value="3">Philodox</option>
<option value="4">Galliard</option>
<option value="5">Ragabash</option>
</select>
</div>
<p>&nbsp</p>
<div class="centre RageOptions">
<select id="RankMenu" onclick="SetRank()" class="menu shadow">
<option value="9999" selected>Rank</option>
<option value="0">Cub (0)</option>
<option value="1">Cliath (1)</option>
<option value="2">Fostern (2)</option>
<option value="3">Adren (3)</option>
<option value="4">Athro (4)</option>
<option value="5">Elder (5)</option>
<option value="6">Legend (6)</option>
</select>
</div>
</div>

// CHANGE GLOBAL VARIABLES ON MENU SELECT
var MoonSetting = "9999";
var AuspiceSetting = "9999";
var GarouRank = Number(0);
function SetMoonPhase() {
let MoonSettingSelected = document.getElementById("MoonPhaseMenu");
MoonSettingSelected.addEventListener("change", function handleChange(event) {
MoonSetting = Number(event.target.value);
});
}
function SetAuspice() {
AuspiceSettingSelected = document.getElementById("AuspiceMenu");
AuspiceSettingSelected.addEventListener(
"change",
function handleChange(event) {
AuspiceSetting = Number(event.target.value);
}
);
}
function SetRank() {
// Set GarouRank global variable on menu change
GarouRankSelected = document.getElementById("GarouRankMenu");
GarouRankSelected.addEventListener("change", function handleChange(event) {
GarouRank = Number(event.target.value);
});
}
// …and repeat for 5 (and counting) functions, each of which is identical except for the ID in getElementById("…")

Answer 1

您可以使用辅助函数来附加eventListeners。(为了方便，更改了id和变量名)

const setMenuValue = (menuId) => {
document.getElementById(menuId).addEventListener("change", ({target: {value}}) => {
window[menuId] = Number(value);
console.log(menuId, window[menuId])
});
};
let MoonPhase = "9999";
let Auspice = "9999";
let Rank = 0;
setMenuValue("MoonPhase");
setMenuValue("Auspice");
setMenuValue("Rank");

.as-console-wrapper { max-height: 100% !important;  }

<div class="centre RageOptions">
<select id="MoonPhase" class="menu shadow">
<option value="9999" selected>Moon phase</option>
<option value="1">Full</option>
<option value="2">Crescent</option>
<option value="3">Half</option>
<option value="4">Gibbous</option>
<option value="5">New</option>
</select>
</div>
<p>&nbsp</p>
<div>
<div class="centre RageOptions">
<select id="Auspice" class="menu shadow">
<option value="9999" selected>Auspice</option>
<option value="1">Ahroun</option>
<option value="2">Theurge</option>
<option value="3">Philodox</option>
<option value="4">Galliard</option>
<option value="5">Ragabash</option>
</select>
</div>
<p>&nbsp</p>
<div class="centre RageOptions">
<select id="Rank" class="menu shadow">
<option value="9999" selected>Rank</option>
<option value="0">Cub (0)</option>
<option value="1">Cliath (1)</option>
<option value="2">Fostern (2)</option>
<option value="3">Adren (3)</option>
<option value="4">Athro (4)</option>
<option value="5">Elder (5)</option>
<option value="6">Legend (6)</option>
</select>
</div>
</div>

Answer 2

您也可以尝试使用for循环创建一个包含所有id的列表。然后你可以传入一个变量，比如menu[j]或menu[0]。您可以在传入文档时使用变量。getElementById，我很确定您可以使用诸如"menu + I "之类的变量创建ID名称。