簡體   English   中英

我將如何結合這兩個類似的功能?

[英]How would I combine these 2 similar functions?

我創建了兩個函數,它們運行一組相似的IF語句,一個顯示游戲的成本,另一個顯示其名稱。 我已經使用“ onclick”在表單中顯示兩個值。 一切正常,但飽受from腫。 有沒有一種方法可以結合兩個功能來縮短腳本?

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

您應該為此使用對象數組

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,在數組中引用其索引(對於0為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";
}

您基本上想一次對兩個字段進行更新。 由於兩個因素(標題和費用)的驅動變量均為( 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; } 

您可以使用簡單的映射替換IF:

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

然后調用:

cost = values[textboxValues]

因此,您僅需要2個地圖作為示例。 如果未在上面的行中找到費用,則表示該費用應為“無效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;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM