javascript - jQuery、クリックごとにランダムなメインカテゴリを生成

Question

Genderこの例では、名前がどの配列から選択されるかを決定するランダムを生成したいという（初心者の）問題があります。のような固定変数を使用してコードを実行すると、これは正常に機能var Gender = 'boy'しますが、このステップを実行しようとすると、成功にはほど遠いです。目標は、ランダム化ボタンがクリックされるたびに性別をランダム化し、対応する配列から名前を取得することです。

このような例を見た後でも、まだ問題を解決できていないので、何がそんなに惨めに失敗しているのか疑問に思い始めています。これは非常に基本的なものであるため、Stackoverflow で実際に新しい質問ではないかもしれないことは理解していますが、これで得た助けに本当に感謝しています。

私の（動作していない）コードのjsFiddle

//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();
});