I have created two functions that run a similar set of IF statements, one shows the cost of a game, the other its name. I have used "onclick" to display both values in my form. It all works but suffers from bloat. Is there a way to combine both functions to shorten the script?
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;
}
You should use an array of objects for this
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
}
];
And then in your function you can accept and id, reference its index in the array (offset by 1 for 0 based) and use that object.
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";
}
You basically want to make the update to both fields at once. Since your driving variable is one ( game_id
) for both factors (title and cost), then you should make the update to those two fields at once. So, something like the following would do:
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; }
You can replace IFs with simple map:
values = {
"1": "0.99",
"2": "0.99",
...
}
Then call it with:
cost = values[textboxValues]
So you just need 2 maps for you example. If the cost is not found with the line above, it means it should be "Invalid ID" value.
Update:
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.