Search code examples
javascripthtmlappendchild

javascript appendChild not working


Here is the code I have, I am trying to append the elements in the array to a drop down select box. The code works fine until the appendChild method. I can't figure out why that one line is not working. Here is the code

</head>
<body>
    <h1> Eat Page</h1>
    <p id="test">Hi</p>
    <select id="CusineList"></select>

    <script type="text/javascript">

        var cuisines = ["Chinese","Indian"];
        var sel = document.getElementById('CuisineList');

        for(var i = 0; i <cuisines.length; i++){

            var optionElement = document.createElement("option");

            optionElement.innerHTML = cuisines[i];

            optionElement.value = i;//cuisines[i];
            //document.getElementById("test").innerHTML = cuisines.length;
            sel.appendChild(optionElement);

        }
    </script>

    <p> When </p>
</body>

</html>

Solution

  • You have spell miss.

    Your id is CusineList, but when you use CuisineList to select.

    Beside that, your code works.