kBrown kBrown - 3 months ago 7
HTML Question

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.

Answer

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"]

Comments