jQuery, Generate random main category on each click

Question

I'm having an (beginner)issue where I want to generate a random, in this example, Gender that'll decide from what array the name is picked. This works fine if i run the code with a fixed variable like var Gender = 'boy', but when I try to make this step I'm far from successful. The goal is to randomize a gender each time the Randomize button is clicked and get a name from the corresponding array.

After having looked at examples like this one, and still not being able to solve my problem I'm starting to wonder what I'm failing so miserably at. I do understand that maybe this shouldn't really be a new question here on Stackoverflow since it's so basic, but I really do appreciate any help I get with this one.

jsFiddle of my (nonworking) code

//var Gender = 'boy' /*for testing*/

var GenderSelection = [
    'boy',
    'girl'
    ];

    var Gender = Math.floor(Math.random()*GenderSelection.length);

    /* previous, broken code
    maxGenderSelection = GenderSelection.length;
    var Gender = Math.floor(Math.random()*(GenderSelection.length));
    */

if(Gender == 'boy') {
/////////////////////////////
//   Foretagsnamn (Name)   //
/////////////////////////////
    var Foretagsnamn = [
    'Matt',
    'Carl',
    'Ron'
    ],
    //the current sentences length
    maxForetagsnamn = Foretagsnamn.length;

// get and return a random sentences from array
function getRandomForetagsnamn() {
    //calculate a random index
    var rndIdxForetagsnamn = Math.floor(Math.random()*(maxForetagsnamn));
    //return the random sentence
    return Foretagsnamn[rndIdxForetagsnamn];                        
}

var randomName = getRandomForetagsnamn();

//show a random sentences in a DOM selector
function showRandomForetagsnamn(selector){
  var randomForetagsnamn = getRandomForetagsnamn(); 
  randomName = randomForetagsnamn;  
  $(selector).html(randomForetagsnamn);
}
}

if(Gender == 'girl') {
/////////////////////////////
//   Foretagsnamn (Name)   //
/////////////////////////////
    var Foretagsnamn = [
    'Lisa',
    'Ann',
    'Sara'
    ],
    //the current sentences length
    maxForetagsnamn = Foretagsnamn.length;

// get and return a random sentences from array
function getRandomForetagsnamn() {
    //calculate a random index
    var rndIdxForetagsnamn = Math.floor(Math.random()*(maxForetagsnamn));
    //return the random sentence
    return Foretagsnamn[rndIdxForetagsnamn];                        
}

var randomName = getRandomForetagsnamn();

//show a random sentences in a DOM selector
function showRandomForetagsnamn(selector){
  var randomForetagsnamn = getRandomForetagsnamn(); 
  randomName = randomForetagsnamn;  
  $(selector).html(randomForetagsnamn);
}
}

else {
    // code to be executed if condition is false
    alert('No soup for you!');
}



///////////////////////////////////////////////////
//   Foretagsbeskrivning (Workdescription)   //
///////////////////////////////////////////////////


var Foretagsbeskrivning = [
    'is an ice cream vendor',
    'is a telemarketer',
    'builds hybrid cars'
    ],
    //the current sentences length
    maxForetagsbeskrivning = Foretagsbeskrivning.length;  

//get and return a random sentences from array
function getRandomForetagsbeskrivning() {
    //calculate a random index
    var rndIdxForetagsbeskrivning = Math.floor(Math.random()*(maxForetagsbeskrivning));
    //return the random sentence
    return Foretagsbeskrivning[rndIdxForetagsbeskrivning];                        
}


//show a random sentences in a DOM selector
    //vad är en DOM selector, för alla taggar i html eller?
function showRandomForetagsbeskrivning(selector){
  var randomForetagsbeskrivning = getRandomForetagsbeskrivning();  
  $(selector).html(randomForetagsbeskrivning);
}


////////////////////////////
//   Målsättning (Goal)   //
////////////////////////////


var Malsattning = [
    '@@person@@ wants to serve a combination of cooling flavours', // aimed at ice cream vendor
    'The long term goal is for @@person@@ to buy ', // aimed at ice cream vendor
    'The vision is for @@person@@ to be the most productive salesperson in the office', // aimed at telemarketer
    'The vision is for @@person@@ to call more than 5000 customers this week', // aimed at telemarketer
    'The goal for @@person@@ is to develop a car that can travel in the speed of light', // aimed at car builder
    '@@person@@ wants to create a vehicle capable of being powered by water' // aimed at car builder
    ],
    //the current sentences length
    maxMalsattning = Malsattning.length;  

//get and return a random sentences from array
function getRandomMalsattning() {
    //calculate a random index
    var rndIdxMalsattning = Math.floor(Math.random()*(maxMalsattning));
    //return the random sentence
    return Malsattning[rndIdxMalsattning];                        
}


//show a random sentences in a DOM selector
    //vad är en DOM selector, för alla taggar i html eller?
function showRandomMalsattning(selector){
  var randomMalsattning = getRandomMalsattning();  
  $(selector).html(randomMalsattning.replace('@@person@@', randomName));

}





//////////////////
//    Output    //
//////////////////


//used to output the different sentences
//used by .click & .ready beneath
var outputLista = function() {
    showRandomForetagsnamn(".foretagsnamn");
    showRandomForetagsbeskrivning(".foretagsbeskrivning");
    showRandomMalsattning(".malsattning");
   }


$('.rndButton').click(function(e){
    outputLista();
    console.log('get random sentences at click...');
});

//generates random sentences when the page loads
$('.rndButton').ready(function(e){
    console.log('get random sentences at page load...');
    outputLista();
});

maverickosama92 · Answer 1 · 2013-08-28T05:53:44.843

try this:

your code was so much redundant. I think that is what you wanted to achieve.

var GenderSelection = [ 'boy', 'girl' ],
    Foretagsnamn = [],       
    randomName = "",
    Foretagsbeskrivning = [
    'is an ice cream vendor',
    'is a telemarketer',
    'builds hybrid cars'
    ],    
    maxForetagsbeskrivning = Foretagsbeskrivning.length,
    Malsattning = [
    '@@person@@ wants to serve a combination of cooling flavours', // aimed at ice cream vendor
    'The long term goal is for @@person@@ to buy ', // aimed at ice cream vendor
    'The vision is for @@person@@ to be the most productive salesperson in the office', // aimed at telemarketer
    'The vision is for @@person@@ to call more than 5000 customers this week', // aimed at telemarketer
    'The goal for @@person@@ is to develop a car that can travel in the speed of light', // aimed at car builder
    '@@person@@ wants to create a vehicle capable of being powered by water' // aimed at car builder
    ],
    //the current sentences length
    maxMalsattning = Malsattning.length; 

function onRandomize(){

var index = Math.floor(Math.random()*GenderSelection.length),
    Gender = GenderSelection[index],
    workDescription = getRandomWorkDescription(),
    goal = getRandomMalsattning();

    Foretagsnamn = [ 'Matt', 'Carl', 'Ron'];                  
    if(Gender == 'girl') {
        Foretagsnamn = [ 'Lisa', 'Ann', 'Sara' ];
    }

   randomName = getRandomForetagsnamn()
   $(".foretagsnamn").text(randomName);
   $(".foretagsbeskrivning").text(workDescription);   
   var replaceName =  goal.replace("@@person@@",randomName);       
   $(".malsattning").text(replaceName);
}

// get and return a random sentences from array
function getRandomForetagsnamn() {   
    var index = Math.floor(Math.random()*(Foretagsnamn.length));    
    return Foretagsnamn[index];
}

function getRandomWorkDescription(){
    var index = Math.floor(Math.random()*(maxForetagsbeskrivning)); 
    return Foretagsbeskrivning[index];
}

function getRandomMalsattning() {    
    var index = Math.floor(Math.random()*(maxMalsattning));    
    return Malsattning[index];                        
}

onRandomize();

$('.rndButton').click(function(e){
    onRandomize();
});

working fiddle here: http://jsfiddle.net/hweUw/8/

i hope it helps.

Redundant indeed. Your version seem to accomplish what I'm after, one thing I don't get though is the second declaration of `Foretagsnamn = [ 'Matt', 'Carl', 'Ron'],` – Whats the point of declaring the three of the male names there? (Also, wouldn't it be easier to have the names in only one place? — Lenny, Aug 25 '13 at 17:37
@Lenny:: That is why because if the array is filled with girls name and let say gender comes male then what would happen?? it will choose from girls name. thats why i just again filled array with respective girls and boys names.. — maverickosama92, Aug 25 '13 at 18:00
ah, I worded my question a bit unclear; what I meant was on the second line `Matt, Carl, Ron` are declared as Foretagsnamn while no mention of the female names. Is this just so that the array is of the correct length later on or something? — Lenny, Aug 25 '13 at 18:23
yes you are saying right. I just updated code above you can also do that way too. — maverickosama92, Aug 25 '13 at 18:37

jQuery, Generate random main category on each click

1 Answers1