combining text into a variable name in javascript

Question

i have looked for an answer to this, but im also not sure im using the correct wording to give me a good search result. So without further adoo.

I am trying to make a random name generator in JavaScript, and I don't want a 300 line switch if it can be avoided. No Jquery if it can be avoided, mainly as i want to learn how to code in JS, for no other reason than that. But if i have to use Jquery, so be it. Learning and all.

The idea is that the script will take the race, gender, then randomly select the first name, surname and proffesion from an array. I can get this to work in IF statements and switches. But I want to try it on as little code as possible. The example below is for humans, but the idea is to pretty much use any fantasy race... dwarves, elves... yes its for dungeons and dragons. Maybe later on use JSON for the array data, but that's later.

var HumanFemale = ["Diane","Laura","Amy"];
var HumanMale   = ["Steve","Dave","Tony"];
var HumanS      = ["Druss","Hale","Taylor"];
var Proff       = ["Theif","Mercenary","Soldier"];

function chargen(race,gender){

var x = race.concat(gender);
var xs= race.concat('S');

        document.getElementById("OutputR").innerHTML= race;
        document.getElementById("OutputG").innerHTML= gender;
        document.getElementById("OutputF").innerHTML= x[Math.floor(Math.random()*x.length)];
        document.getElementById("OutputS").innerHTML=xs[Math.floor(Math.random()*xs.length)];
        document.getElementById("OutputJ").innerHTML=Proff[Math.floor(Math.random()*Proff.length)];


}

Maybe I need dynamic variables, but i'm not sure how to convert text into a var name.

Thanks

http://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable — Teemu, Mar 11 '16 at 16:39

score 0 · Answer 1 · answered Mar 11 '16 at 16:49

Here's what I crudely chucked together.

var Proff=["Theif","Mercenary","Soldier"];

var CharacterName={};
CharacterName['human']={};
CharacterName['human']['female'] = new Array('Diane','Laura','Amy');
CharacterName['human']['male'] = new Array('Steve','Dave','Tony');
CharacterName['human']['surname'] = new Array('Druss','Hale','Taylor');
//just add more stuff here!


document.getElementById('OutputR').innerHTML= 'boo';

function chargen(race,gender){

  document.getElementById('OutputR').innerHTML= race;
  document.getElementById('OutputG').innerHTML= gender;
  document.getElementById('OutputF').innerHTML= grabrandom(CharacterName[race][gender]);
  document.getElementById('OutputS').innerHTML= grabrandom(CharacterName[race]['surname']);
  document.getElementById('OutputJ').innerHTML= grabrandom(Proff);

}

function grabrandom(arrayofvalues){
    return arrayofvalues[Math.floor(Math.random()*arrayofvalues.length)];
}

chargen('human','female');

It's nothing special and a couple of bits could be sharpened, but it's functional and gives you the idea on how it could be done.

Very usefull thank you. I learnt a bit from this. Thanks again. — Kalacia, Mar 15 '16 at 10:59

score 0 · Accepted Answer · answered Mar 11 '16 at 16:51

I think an object probably makes your life a little easier, but the idea is generally the same as what you appear to have.

In JavaScript you can reference a property of an object like an array. This means that if you have a property name that can be variable, you can use the array convention to fetch the property instead of the "." convention.

Here's an example:

var example = {
    "first": "hello",
    "second": "world"
}

//Using dot-notation
alert(example.first); //alerts "hello"
alert(example.second) //alerts "world"

//Using array-notation
alert(example["first"]); //alerts "hello"
alert(example["second"]); //alerts "world"

Now, if the property we want is variable, we can't use the dot-notation, but we can use the array-notation:

var prop_name = "second";

//Using dot-notation
alert(example.prop_name); //throws an error (undefined property)

//Using array-notation
alert(example[prop_name]); //alerts "world"

So, if you create essentially a dictionary object, you may find it's easier/more concise to complete your task:

var dict = {
    "Human": {
        "Male": ["Steve", "Dave", "Tony"],
        "Female": ["Diane", "Laura", "Amy"],
        "Surname": ["Druss", "Hale", "Taylor"]
    },
    "Elf": {
        "Male": [/* names */],
        "Female": [/* names */],
        "Surname": [/*names */]
    }
}

function rand_attributes(race, gender) {
    var first_name_index = Math.floor(Math.random() * dict[race][gender].length),
        last_name_index = Math.floor(Math.random() * dict[race]["Surname"].length),
        first_name = dict[race][gender][first_name_index],
        last_name = dict[race]["Surname"][last_name_index];

    //Now first_name and last_name each contain random values
    //Do what you need to with those values from here
}

That code is untested, but it should at least conceptually work out.

This was easier than Matthew's post for me to get started on to resolve the issue. Thank you. — Kalacia, Mar 15 '16 at 11:00

score 0 · Answer 3 · answered Mar 15 '16 at 10:58

The solution i got, heavily based on xjstratedgebx's responce.

var names = {
    "Human": {
        "Female": ["Diane","Laura","Amy"],
        "Male": ["Steve","Dave","Tony"],
        "Surname": ["Hall","Young","Taylor"]
        }
}


function namegen(race,gender){

var firstname = names[race][gender][Math.floor(Math.random() * names[race][gender].length)];
var lastname = names[race]["Surname"][Math.floor(Math.random() * names[race]["Surname"].length)];

    document.getElementById("OutputR").innerHTML= "Human";
    document.getElementById("OutputG").innerHTML= "Female";
    document.getElementById("OutputF").innerHTML= firstname;
    document.getElementById("OutputS").innerHTML= lastname;
}

combining text into a variable name in javascript

3 Answers3