getElementById轉換為數組以進行切換

Question

我正在嘗試根據所選標題更改標題和橫幅BG。

function display() {

var gameSelected = ["game_dota2","game_clashroyale","game_csgo","game_fortnite","game_pubg",];
var mmgame = document.getElementById(gameSelected);

  switch (mmgame){
    case "Dota 2":
    var mmgame2 = "Dota 2";
    break;
    case "Clash Royale":
    var mmgame2 = "Clash Royale";
    break;
  }

這就是如何基於onclick事件獲得選擇哪個游戲的想法。

我是一個初學者，不知道這是否是處理該問題的最佳方法，如果您有更好的建議，請告訴我。

現在，下一個問題將是找出將工作var實現到另一個switch語句的最佳方法，然后再使用.innerHTML和.src將新的Title和新的BG圖像推送到站點頂部。

switch (mmgame2){
    case "Dota 2":
      var element = document.getElementById("wht");
      element.innerHTML = mmgame2;
      document.getElementById("whbg").src = dota2_bg;
    break;
    case "Clash Royale":
      var element = document.getElementById("wht");
      element.innerHTML = mmgame2;
      document.getElementById("whbg").src = clashroyale_bg;
    break;
    case "CS:GO":
      var element = document.getElementById("wht");
      element.innerHTML = mmgame2;
      document.getElementById("whbg").src = csgo_bg;
    break;
    case "Fortnite":
      var element = document.getElementById("wht");
      element.innerHTML = mmgame;
      document.getElementById("whbg").src = fornite_bg;
    break;
    case "PUB:G":
      var element = document.getElementById("wht");
      element.innerHTML = mmgame;
      document.getElementById("whbg").src = pubg_bg;
    break;
    default:
      var element = document.getElementById("wht");
      element.innerHTML = "Your Game Is Not Ready Now";
    break;
  } 

}

謝謝！

Answer 1

另一種方法可能是這樣的：

var selectedGame = getSelectedGame(); //to be defined

var gamesList = {
    "Dota 2": {
        title: 'Dota 2',
        background: '/path/to/Dota2_bg.png'
    },
    "Clash Royale": {
        title: 'Clash Royale',
        background: '/path/to/ClashRoyale_bg.png'
    },
    // add any more games to here, with any needed attributes
};

var game = gamesList[selectedGame];

element.innerHTML = game.title; //set title to game's title as specified above
document.getElementById("whbg").src = game.background; //set background image

這可能會更容易擴展。

Answer 2

我通過簡單地為每個游戲創建一個.js文件來解決該問題。

這也將有助於擴展它，因為每個游戲將包含更多的js代碼，而不僅僅是單擊和更改功能。

這是將為每個游戲實施的更改的代碼示例：

function display_dota2(){
  var element = document.getElementById("wht");
   element.innerHTML = "Dota 2"; //set title to game's title as specified above
  var dota2_bg = "../src/header_bg/dota2.png";
   document.getElementById("whbg").src = dota2_bg; //set background image
}