CODEWITHSUNDEEP
javascripthtmlarraysfunction
kBrown
kBrown

Reputation: 23

Passing strings from arrays with a requirement

I'm pretty much new to Javascript so this isn't a question of efficiency, more just a question of possibility! 

var experience = 156;

var titleData = [
  {"Duke" 
if (0 < experience < 101)},
  {"King" 
if (100 < experience < 201)},
  {"Emperor"
if (300 < experience < 301)}
];

return(titleData)

I'm creating a very small and simple game using html and javascript and have been stuck at this point for close to two hours after much google searching. I'm trying to use this array to store a list of possible titles that would be passed onto the html to be used as a title before the person's name and have paired down what I am working on into this much simpler and shorter example.

I want to use the variable 'experience' in order to return a specific string, such as Duke or Emperor from the array and then eventually pass that on with getElementById and inputting that directly on the webpage. So that when the player gains more experience, the title automatically updates. I know I'll have to use a for loop at some point, but trying to figure out exactly what needed to go into that proved to be too much of a hair-puller.

I know I am probably doing this VERY wrong, but this is my first foray into trying to use arrays in this way. I'm not married to the idea of an array or the way that I have tried to set it up, so if I am doing this in the completely most roundabout way, let me know. I hope I was able to communicate the essence of what I'm trying to accomplish, even if my code isn't clear.

Upvotes: 0

Views: 61

Answers (6)

TimoStaudinger
TimoStaudinger

Reputation: 42460

As Roberrrt already mentioned, your syntax is not valid, you can not use if statements inside an object or array declaration.

One of many possible approaches would be to first declare your different titles in an array, defining the title and their min/max experience boundaries. This data can then also be moved e.g. to a separate config file to better compartementalize your code.

After that, it is only a matter of going through the different titles and checking whether the player fulfills the experience requirements:

var experience = 156;
var titleData = [];

var titles = [{
  name: "Duke",
  min: 0,
  max: 101
}, {
  name: "King",
  min: 100,
  max: 201
}, {
  name: "Emperor",
  min: 300,
  max: 301
}, {
  name: "Khal",
  min: 120,
  max: 160
}];

for (var i = 0; i < titles.length; i++) {
  if (titles[i].min < experience && titles[i].max > experience) {
    titleData.push(titles[i].name);
  }
}

console.log(titleData); // ["King", "Khal"]

In order to make the experience boundaries even more flexible, you could even define a function for each of the titles, defining the condition:

    var experience = 1000000;
    var titleData = [];

    var titles = [{
      name: "Oddball",
      condition: function(exp) {
        return (exp % 2) == 0; // Exp. multiple of 2?
      }
    }, {
      name: "Supreme Leader",
      condition: function(exp) {
        return exp > Math.pow(2, 10); // Exp. greater than the 10th power of 2?
      }
    }];

    for (var i = 0; i < titles.length; i++) {
      if (titles[i].condition(experience)) {
        titleData.push(titles[i].name);
      }
    }

    console.log(titleData); // ["Oddball", "Supreme Leader"]

Upvotes: 3

roberrrt-s
roberrrt-s

Reputation: 8210

No, you're declaring an array which holds data, you cannot use logic inside of that declaration. The correct way is to declare the titles, and push them inside the array.

// Setting the current experience a player has
var experience = 156;

// Defining a function that returns the title, based upon the experience
function getTitle(experience) {

    // List all options, based on the experience
    if(experience < 101) {
        // Return basically means 'give back this value as function output'
        return "Duke";
    }
    else if(experienec < 201) {
        return "King";
    }
    else if(experience < 301) {
        return "Emperor";
    }
    else {
        return "Too high!";
    }

}

// Declaring the players title, by calling the getTitle() function, 
// with the experience as a parameter.
var title = getTitle(experience);

EDIT: As @Brian stated, this could be more elegant using the switch statement:

var level = 1;

switch (level) {
    case 1:
        return "Duke";
        break;
    case 2:
        return "King";
        break;
    case 3:
        return "Emperor";
        break;
    default:
        return "Too high!";
}

Upvotes: 1

Beckham_Vinoth
Beckham_Vinoth

Reputation: 721

var titleData =[];
var experience = 156;
if(0 < experience < 101)
{
          var data = "Duke";
          titleData.push(data);  
}
if(100 < experience < 201)
{
          var data = "King";
          titleData.push(data);  
}
if(300 < experience < 301)
{
          var data = "Emperor";
          titleData.push(data);  
}
return(titleData);

Hope this will work,

Upvotes: 0

Jaromanda X
Jaromanda X

Reputation: 1

You can do something almost like you want, using javascript ternary statement

condition ? value-when-true : value-when-false;

see MDN documentation for ternary operator

e.g.

var titleData = [ experience < 0 ? "peasant" : experience < 101 ? "Duke" : experience < 201 ? "king" : experience < 301 ? "Emperor" : "uber"]

Added peasant, what happens under 0 ? ;) Added uber, what happens above 301:?

Upvotes: 0

sba
sba

Reputation: 2107

If you don't need the titles for anything else, just have a function return the right one given the experience:

function titleGivenExperience(experience) {
    if (experience <= 100) return "Duke";
    if (experience <= 200) return "King";
    return "Emperor";
}

var title = titleGivenExperience(120);

Upvotes: 0

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2574

An array cannot have if inside it. If you need to do this using an array, this is one way of doing it:

var titleData = [];
if (0 < experience < 101) {
  titleData.push("Duke");
} else if (100 < experience < 201) {
  titleData.push("King")
} 
...
return(titleData)

But If its just going to be a string, you can also do:

function (experience) {
    var titleData = "";
    if (0 < experience < 101) {
      titleData = "Duke";
    } else if (100 < experience < 201) {
      titleData = "King";
    }
    ...
    return(titleData)
}

Upvotes: 0

Related Questions