我将如何结合这两个相似的功能？

Question

我创建了两个函数，运行一组类似的 IF 语句，一个显示游戏的成本，另一个显示它的名称。我已经使用 "onclick" 在我的表单中显示这两个值。这一切都有效，但会膨胀。有没有办法结合这两个功能来缩短脚本？

        function GameTitle() {
var textboxValue = document.getElementById("game_id").value;
    var message;
    if (textboxValue == 1) {
        message = "Fantasy World";
    } else if (textboxValue == 2) {
        message = "Sir Wags A Lot";
    } else if (textboxValue == 3) {
        message = "Take a Path";
    } else if (textboxValue == 4) {
        message = "River Clean Up";
    } else if (textboxValue == 5) {
        message = "PinBall";
    } else if (textboxValue == 6) {
        message = "Ghost girl";
    } else if (textboxValue == 7) {
        message = "Dress Up";
    } else if (textboxValue == 8) {
        message = "Where is my hat?";
    } else {
        message = "Invalid ID";
    }
document.getElementById("game_title").value = message;
}

//Display price of Game
    function Cost() {
var textboxValue = document.getElementById("game_id").value;
    var cost;
    if (textboxValue == 1) {
        cost = "0.99";
    } else if (textboxValue == 2) {
        cost = "0.99";
    } else if (textboxValue == 3) {
        cost = "1.99";
    } else if (textboxValue == 4) {
        cost = "1.99";
    } else if (textboxValue == 5) {
        cost = "3.99";
    } else if (textboxValue == 6) {
        cost = "3.99";
    } else if (textboxValue == 7) {
        cost = "1.99";
    } else if (textboxValue == 8) {
        cost = "1.99";
    } else {
        cost = "Invalid ID";
    }
document.getElementById("cost").value = cost;
}

Answer 1

您可以用简单的地图替换 IF：

values = {
  "1": "0.99",
  "2": "0.99",
  ...
}

然后调用它：

cost = values[textboxValues]

例如，您只需要 2 张地图。如果成本没有找到上面那一行，那就意味着它应该是"Invalid ID"值。

更新：

values = {
  "1": {
    cost: "0.99",
    name: "Sir Bunny Hopings"
  },
  "2": {..},
  ...
  }

Game = function() {
  var i = document.getElementById("game_id").value,
      game;

  game = values[id] || {cost: "Invalid ID", name: "Invalid iD"};

  document.getElementById("cost").value = game.cost;
  document.getElementById("game_title").value = game.name;
}

Answer 2

你应该为此使用一个对象数组

var games = [
 {
  message : "Fantasy World",
  cost : 0.99
 },
 {
  message : "Sir Wags A Lot",
  cost : 0.99
 },
 {
  message : "Take a Path",
  cost : 1.99
 },
 {
  message : "River Clean Up",
  cost : 1.99
 },
 {
  message : "PinBall",
  cost : 3.99
 },
 {
  message : "Ghost girl",
  cost : 3.99
 },
 {
  message : "Dress Up",
  cost : 1.99
 },
 {
  message : "Where is my hat?",
  cost : 1.99
 }
];

然后在您的函数中您可以接受和标识，引用其在数组中的索引（基于 0 偏移 1）并使用该对象。

function Display(){
 var textboxValue = parseInt(document.getElementById("game_id").value,10);
 document.getElementById("game_title").value = 
  textboxValue-1 < games.length ? games[textboxValue-1].message : "Invalid ID";
 document.getElementById("cost").value = 
  textboxValue-1 < games.length ? games[textboxValue-1].cost : "Invalid ID";
}

Answer 3

您基本上是想同时更新这两个字段。由于两个因素（标题和成本）的驱动变量是一个 (game_id)，因此您应该同时更新这两个字段。所以，像下面这样的事情会做：

 function updateGameTitleAndCost() {
   var textboxValue = document.getElementById("game_id").value;
   var message, cost;
   if (textboxValue == 1) {
     message = "Fantasy World";
     cost = "0.99";
   } else if (textboxValue == 2) {
     message = "Sir Wags A Lot";
     cost = "0.99";
   } else if (textboxValue == 3) {
     message = "Take a Path";
     cost = "1.99";
   } else if (textboxValue == 4) {
     message = "River Clean Up";
     cost = "1.99";
   } else if (textboxValue == 5) {
     message = "PinBall";
     cost = "3.99";
   } else if (textboxValue == 6) {
     message = "Ghost girl";
     cost = "3.99";
   } else if (textboxValue == 7) {
     message = "Dress Up";
     cost = "1.99";
   } else if (textboxValue == 8) {
     message = "Where is my hat?";
     cost = "1.99";
   } else {
     message = "Invalid ID";
     cost = "Invalid ID";
   }

   document.getElementById("game_title").value = message;
   document.getElementById("cost").value = cost;
 }

我将如何结合这两个相似的功能？

How would I combine these 2 similar functions?

javascript

forms

if-statement