Javascript 我将如何组合这两个类似的功能？

我创建了两个函数，它们运行一组类似的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;
}

---

您可以使用简单映射替换IFs：

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

然后用以下词语来称呼它：

cost = values[textboxValues]

例如，你只需要两张地图。如果在上面的行中找不到成本，则表示它应该是“无效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;
}

---

您应该为此使用对象数组

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

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

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

函数显示（）{
var textboxValue=parseInt（document.getElementById（“game_id”）.value，10）；
document.getElementById（“游戏名称”）。值=
textboxValue-1

您基本上希望同时对这两个字段进行更新。由于两个因素（标题和成本）的驱动变量都是一个（

game\u id

），因此您应该立即更新这两个字段。因此，类似于以下内容的操作可以：

函数updateGameTitleAndCost（）{
var textboxValue=document.getElementById（“游戏id”）.value；
var消息，成本；
如果（textboxValue==1）{
message=“幻想世界”；
成本=“0.99”；
}else if（textboxValue==2）{
message=“Sir经常摇摆”；
成本=“0.99”；
}else if（textboxValue==3）{
message=“走一条路”；
成本=“1.99”；
}else if（textboxValue==4）{
信息=“河流清理”；
成本=“1.99”；
}else if（textboxValue==5）{
message=“弹球”；
成本=“3.99”；
}else if（textboxValue==6）{
message=“鬼女孩”；
成本=“3.99”；
}else if（textboxValue==7）{
message=“打扮”；
成本=“1.99”；
}else if（textboxValue==8）{
message=“我的帽子在哪里？”；
成本=“1.99”；
}否则{
message=“无效ID”；
cost=“无效ID”；
}
document.getElementById（“游戏名称”）.value=消息；
document.getElementById（“成本”）。值=成本；
}

在同一个函数中分配消息和成本的值，为什么要调用两个function@spike-好主意：）这确实是处理此类问题的最佳方法。你是想使用

textboxValue-1

？@JLRishe-是：）谢谢你的建议。对新程序员的建议很棒@科尔约翰逊-你的讽刺没有建设性。请记住，这里的答案不只是针对OP，而是针对未来也会找到答案的普通人群。这似乎很有希望-它可以用于同时更新两个字段吗？@RickTicky这已经同时更新了两个字段。不需要“如果”语句。您只需将

值

数组（hashmap）编辑为您的值。@Cole Johnson啊，我明白了。。非常聪明。谢谢@bigT我想知道，是否可以通过添加几行代码来计算游戏的租借价格…我做了一些更改以反映这一点-尽管我的初始测试显示存在问题。@RickTicky-是的，我不明白为什么不。。如果您要进行的任何计算涉及从

If

语句中获得的成本，您首先需要确保它是！==“无效ID”，然后单击以数字形式而不是字符串形式获取其实际值。