动态下拉菜单不会根据选择创建

Question

So i'm working on a project that creates three drop down menus that appear based on the option selected on the first. When I select from the first menu, "Male" or "Female" the correct menus appear( example, when Male is selected, the drop down with the options ""Human", "Dwarf", "Orc" appear). However, after that I can not get a third drop down menu to appear based on the next selection using the same methods before. At this point I am very lost.

var step1 = ["Choose Gender?", "Male", "Female"];
var step2 = [["Choose your race!", "Human", "Dwarf", "Orc"],["Choose your race!", "Fairy", "Elf", "Centaur"]];
var step3 = [["Human Class!", "Warrior", "Sorcerer", "Theif"], ["Elf Class!", "Cleric", "Necromancer", "Priest"], ["Dwarf Class!", "Cannonner", "Rifelman", "Engineer"], ["Orc Class!", "Beserker","Warlock", "Shaman"], ["Fairy Class!", "Druid", "Arcanist", "Mystic"]];
function testData(){
    menuCreate(step3[0]);
}
function init() {
    menuCreate(step1);

    var dropdown = document.getElementById("form");
    dropdown.onchange = function(event){    
        if (dropdown.value == "Male"){
            //menuCreate(step2[0]);

                var myDiv = document.getElementById("mainDiv");

                var next = document.createElement('input');
                next.setAttribute('type','button');
                next.setAttribute('value','Next');
                next.setAttribute('onclick','maleRace()');
                myDiv.appendChild(next);
        } else if (dropdown.value == "Female"){
            //menuCreate(step2[1]);

                myDiv = document.getElementById("mainDiv");

                femaleNext = document.createElement('input');
                femaleNext.setAttribute('type','button');
                femaleNext.setAttribute('value','Next');
                femaleNext.setAttribute('onclick','femaleRace()');
                myDiv.appendChild(femaleNext);
        } 

     } 

} // end init()
function menuCreate(step1){
    //console.log(step1);
    var myDiv = document.getElementById("mainDiv");
    var titleElement = document.createElement("h1");

    titleElement.setAttribute('style','color:white');
    titleElement.setAttribute('id','guide');

    var selectForm = document.createElement('select');

    selectForm.id = "form";
    myDiv.appendChild(selectForm);

    for (var i=0; i< step1.length; i++){
        var option = document.createElement('option');
        option.value = step1[i];
        option.text = step1[i];
        selectForm.appendChild(option);

    }






} // end menuCreate()

function maleRace(){
    menuCreate(step2[0]);

    var down = document.getElementById("form");
        down.onchange = function(event){
        if (down.value == "Human"){
                menuCreate(step3[0]);
                var div = document.createElement("div");

                var next = document.createElement('input');
                next.setAttribute('type','button');
                next.setAttribute('value','Next');
                next.setAttribute('onclick','maleRace()');
                div.appendChild(next);
        }

    }
} // end maleRace()

Please note I cant use JQUERY or innerHTML/innerText. I have to do this using normal JavaScript the problem is that when I select "Human" on the second menu, I am supposed to get another menu that uses step3[0].

Answer 1

In the menuCreate function, you're setting an id attribute to the select element: selectForm.id = "form"; . After you call it for the second time (for the second step), you have two elements with the same id in your document. Then, when you try to add the onchange event handler on the maleRace function - document.getElementById("form"); down.onchange = function(event){ document.getElementById("form"); down.onchange = function(event){ you actually attach this handler to the first select element (the gender one) instead of the second one.

A nice way to solve this problem, will be to add a second argument to the menuCreate function like so: function menuCreate(step1, id){ . Then, change this line a bit from selectForm.id = "form"; to selectForm.id = id; .

Then, change every call to the createMenu function to have its own id:

function init() {
    menuCreate(step1, 'step1form');
    var dropdown = document.getElementById("step1form");


function maleRace(){
    menuCreate(step2[0], 'step2form');
    var down = document.getElementById("step2form");

You can check out this codepen: https://codepen.io/anon/pen/xXJwBv?editors=1011