javascript - 尝试根据用户输入、JS/JQuery 从数组中检索数据

Question

我正在尝试为我和 friend 玩的桌面策略游戏创建一个随机领主生成器，基本上用户选择为其创建它的派系(然后更改可用名称)并选择它是国王还是领主(根据当前选择的派系和等级更改标题)。

该脚本还将随机生成忠诚度、财富和影响力(游戏中所需的统计数据)。目前发生的情况是它显示统计数据，有时会搞砸影响力，说 NaN 而不是预期的随机数，它还显示未定义未定义的未定义而不是 CurNation 的 CurTitle CurLordName。我通过 JSlint 运行它，只得到一些信息告诉我它应该在第 5 列而不是第 9 列等。所以我被难住了。

    // King/Lord creator
// when starting a campaign all kings are NPCs, also some lords are npcs.
//Global Variables
var iFaction, isKing;// faction in numbers (used for calculations)i and is character lord or king? 1 = king 2=lord
var curLordname, curTitle, curNation;  //Current lord name (For output), Current title (For output) and Current nation (For output)
var iModder; // Number to add to the random math
var curWealth; // Lord wealth (random number 200 - 1000)
var curLoyalty; //Lord Loyalty (random number between 1-10)
var curInfluence; //Lord Influence ((random number 1-10 + wealth/100)/2)
// King Titles

var aTitles = new Array();
aTitles[1] = "King";
aTitles[2] = "High Chief";
aTitles[3] = "Anax";
aTitles[4] = "Emperor";
// Lord Titles
aTitles[5] = "Baron";
aTitles[6] = "Jarl";
aTitles[7] = "Stratigos";
aTitles[8] = "Warlord";

// Lords names, Leontrois (1-25), Saxathia(26-50), Hellios(51-75), Drakon(75-100)
var aNames = new Array();
aNames[0] = "Maverick";
//Leontrois Names (Math.floor((Math.random()*25)+1);)
aNames[1] = "Henry";
aNames[2] = "Edward";
aNames[3] = "Thomas";
aNames[4] = "George";
aNames[5] = "Stephen";
aNames[6] = "William";
aNames[7] = "James";
aNames[8] = "Louis";
aNames[9] = "Charles";
aNames[10] = "David";
aNames[11] = "Oliver";
aNames[12] = "Duncan";
aNames[13] = "Leonardo";
aNames[14] = "Phillip";
aNames[15] = "Francis";
aNames[16] = "Johnathan";
aNames[17] = "Richard";
aNames[18] = "Robert";
aNames[19] = "Jacob";
aNames[20] = "Peter";
aNames[21] = "Patrick";
aNames[22] = "Arthur";
aNames[23] = "Isaac";
aNames[24] = "Laurence";
aNames[25] = "Edmund";
// Saxathia Names (Math.floor((Math.random()*25)+26);)
aNames[26] = "Mordra";
aNames[27] = "Horsa";
aNames[28] = "Offa";
aNames[29] = "Sigfryd";
aNames[30] = "Coelwulf";
aNames[31] = "Sledda";
aNames[32] = "Harold";
aNames[33] = "Ulfryk";
aNames[34] = "Ongar";
aNames[35] = "Ragnar";
aNames[36] = "Kren";
aNames[37] = "Merkar";
aNames[38] = "Canute";
aNames[39] = "Kealin";
aNames[40] = "Echbert";
aNames[41] = "Aethelred";
aNames[42] = "Ulfred";
aNames[43] = "Bryn";
aNames[44] = "Godwin";
aNames[45] = "Cin";
aNames[46] = "Oswine";
aNames[47] = "Mul";
aNames[48] = "Cnut";
aNames[49] = "Aelthor";
aNames[50] = "Gryff";
//Hellios Names (Math.floor((Math.random()*25)+51);)
aNames[51] = "Alexander";
aNames[52] = "Ajax";
aNames[53] = "Telemachus";
aNames[54] = "Odysseus";
aNames[55] = "Antinous";
aNames[56] = "Marcus";
aNames[57] = "Julius";
aNames[58] = "Nero";
aNames[59] = "Constantine";
aNames[60] = "Achillies";
aNames[62] = "Agamemnon";
aNames[63] = "Menelaus";
aNames[64] = "Nestor";
aNames[65] = "Laertes";
aNames[66] = "Priam";
aNames[67] = "Hector";
aNames[68] = "Paris";
aNames[69] = "Diomedes";
aNames[70] = "Patroclus";
aNames[71] = "Glaucus";
aNames[72] = "Sarpedon";
aNames[73] = "Idomeneus";
aNames[74] = "Eurymachus";
aNames[75] = "Amphinomus";
//Drakon names (Math.floor((Math.random()*25)+76);)
aNames[76] = "Xiahou";
aNames[77] = "Cao Yi";
aNames[78] = "Sun Li";
aNames[79] = "Ma Tao";
aNames[80] = "Jin Yuan";
aNames[81] = "Huang";
aNames[82] = "Zhong";
aNames[83] = "Fei Song";
aNames[84] = "Chan Yin";
aNames[85] = "Dong Xa";
aNames[86] = "Pang Shao";
aNames[87] = "Keiji";
aNames[88] = "Reiji";
aNames[89] = "Matsuhide";
aNames[90] = "Samonuske";
aNames[91] = "Nobunaga";
aNames[92] = "Ieyasu";
aNames[93] = "Minghuan";
aNames[94] = "Yisun";
aNames[95] = "Erdene";
aNames[96] = "Tolui";
aNames[97] = "Kenji";
aNames[98] = "Masamune";
aNames[99] = "Hassan";
aNames[100] = "Al'Tar";
//End of lord names

// First what nation are you from:
$("#selNation").change(function() {
iFaction = $(this).val();
    switch (iFaction) {
    case 1:
        curNation = "Leontrois";
        iModder = 1;
        break;
    case 2:
        //iFaction=2;
        curNation = "Saxathia";
        iModder = 26;
        break;
    case 3:
        //iFaction=3;
        curNation = "Hellios";
        iModder = 51;
        break;
    case 4:
        //iFaction = 4;
        curNation = "Drakon";
        iModder = 76;
        break;
    }
//$("#selLord").disabled = false;
});

$("#selLord").change(function() {
    isKing = $(this).val();
    switch (isKing) {
    case 1:
        curTitle = aTitles[iFaction];
        //  switch(iFaction){
                // case 1:
                // curTitle = aTitles[1];
                // break;
                // case 2:
                // curTitle = aTitles[2];
                // break;
                // case 3:
                // curTitle = aTitles[3];
                // break;
                // case 4:
                // curTitle = aTitles[4];
                // break;
            //}
        break;
    case 2:
        var temp = iFaction + 4;
        curTitle = aTitles[temp];
            // switch(iFaction){
                // case 1:
                // curTitle = aTitles[5];
                // break;
                // case 2:
                // curTitle = aTitles[6];
                // break;
                // case 3:
                // curTitle = aTitles[7];
                // break;
                // case 4:
                // curTitle = aTitles[8];
                // break;
            // }
        break;
    }
//$("#lordbtn").disabled = false;
});

function createlord() {
//get lord name
    var temp2 = Math.floor(curWealth/100) + 1, temp3 = Math.floor(((Math.random() * 10) + temp2) / 2), temp4 = Math.floor((Math.random() * 25) + iModder);
    curInfluence = temp3;
    curLoyalty = Math.floor((Math.random() * 10) + 1);
    curWealth = Math.floor((Math.random() * 800) + 200);
    curLordname = aNames[temp4];
//display result
    var supastring = "<h3>" + curTitle + " " + curLordname + " of " + curNation + ". </h3>" + "<br /> <p>His wealth is " + curWealth + "Gp, His influence is " + curInfluence + " and his loyalty is " + curLoyalty + ".</p>" + "<br /> <button class='btn btn-large' type='button' onclick='resetlord()'>Create another Lord</button>";
//$("#lordresult").innerHTML = supastring;
    document.getElementById("lordresult").innerHTML = supastring;
}
function resetlord() {
// $("#lordresult").innerHTML
//document.getElementById("lordresult").innerHTML 

        document.getElementById("lordresult").innerHTML = "<h2>Broken History: Lord Creator tool</h2>   <small>This tool is designed to help you when playing Broken History 1.0 the CWDC Expansion, and is used to determine the name of a new NPC lords (on the death of a previous lord). Note: 'You' refers to the character being created.</small><br />   <p>Choose faction and rank then click button to generate the new NPC.<br /></p><label>What faction are you from?</label><select id='selNation'><option selected='selected' disabled='disabled'>Select faction:</option><option value='Leontrois' >Leontrois</option><option value='Saxathia'>Saxathia</option>        <option value='Hellios'>Hellios</option><option value='Drakon'> Drakon</option>      </select><label>Are you the Monarch of a faction?</label><select id='selLord'> <option selected='selected'>Choose rank:</option><option value='1' >Monarch</option><option value='2'>Vassal</option> </select> <button class='btn btn-large' type='button' id='lordbtn' onclick='createlord()'>Generate new lord</button></p>";
    }

这是结果屏幕的屏幕截图:

Answer 1

将事件处理代码放入文档就绪事件中:

$(document).ready(function() {
    $("#selNation").change(function() {
      ....
    });

    $("#selLord").change(function() {
      .....
    });
});

和 iFaction = $(this).val(); 但您将其与数字进行比较，您应该输入将其转换为数字:

iFaction = Number($(this).val()); // parseInt also will work

最后，您正在使用 curWealth，但它尚未定义。在使用之前先定义该值:

更改这部分:

var temp2 = Math.floor(curWealth/100) + 1, temp3 = Math.floor(((Math.random() * 10) + temp2) / 2), temp4 = Math.floor((Math.random() * 25) + iModder);
    curInfluence = temp3;
    curLoyalty = Math.floor((Math.random() * 10) + 1);
    curWealth = Math.floor((Math.random() * 800) + 200);

对此:

curWealth = Math.floor((Math.random() * 800) + 200);

var temp2 = Math.floor(curWealth/100) + 1, temp3 = Math.floor(((Math.random() * 10) + temp2) / 2), temp4 = Math.floor((Math.random() * 25) + iModder);
    curInfluence = temp3;
    curLoyalty = Math.floor((Math.random() * 10) + 1);

这是工作fiddle