getElementById 到数组到函数来切换答案

【问题标题】：getElementById to array to function to switchgetElementById 到数组到函数来切换
【发布时间】：2019-03-23 16:38:34
【问题描述】：

我正在尝试根据所选标题更改我的标题和横幅背景。

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 将新标题和新 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;
  }

}

谢谢！

【问题讨论】：

仅供参考，正确的语法是break;，而不是brake;
你点击的是什么元素？
当你点击一个元素时，事件监听器接收一个Event对象作为参数。您可以使用event.target 获取被点击的元素，使用event.target.id 获取其ID。然后，您可以使用switch(event.target.id) 根据他们点击的内容执行不同的操作。
document.getElementById(gameSelected) 没有意义。参数必须是特定 ID，而不是 ID 数组。您可以使用 allGames = gameSelected.map(id => document.getElementById(id)) 创建一个元素数组
@Barmar 我正在尝试单击包含以下内容的 div：

Dota 2

标签： javascript html arrays switch-statement

【解决方案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

这可能更容易扩展。

【讨论】：

只是推了它，它似乎不起作用。我定义为“cs”和“d2”等的点是 html 代码中对 id 的调用吗？或者我如何确保它基于事件工作？

【解决方案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
}

【讨论】：