getElementById в массив, чтобы функция для переключения - PullRequest
Новая
       8

getElementById в массив, чтобы функция для переключения

0 голосов
/ 18 октября 2018

Я пытаюсь изменить заголовок и баннер 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, который затем выталкивает новый заголовок и новое изображение BG в верхнюю часть сайта, используя .innerHTML.и .src 

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;
  }

}

Спасибо!

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Я решил это, просто создав для каждой игры файл .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
}
0 голосов
/ 18 октября 2018

Другой подход может быть примерно таким: 

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

Это может быть немного легче масштабировать.

...