The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript What am I doing wrong?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #146086
    Attila Hajzer

    I’m trying to create a js array and output the array items into a dropdown list. but i’m messing something up. can somebody help?


    Hi, I made it in this way


    try this out


    pre>`$(document).ready(function() {
    var options = new Array();
    options [0] = "one";
    options [1] = "two";
    options [2] = "three";
    options [3] = "four";
    options [4] = "five";
    options [5] = "six";

    <p>for (var i = 0; i < 6; i++)
    {<br />
    var newItem = document.createElement('OPTION');
    newItem.text = [i];
    newItem.value= [i];<br />



    $(document).ready(function() {
    var options = new Array();
    options [0] = “one”;
    options [1] = “two”;
    options [2] = “three”;
    options [3] = “four”;
    options [4] = “five”;
    options [5] = “six”;

    for (var i = 0; i < 6; i++)
    {<br />
    var newItem = document.createElement(‘OPTION’);
    newItem.text = [i];
    newItem.value= [i];<br />



    If you want to do it via innerHTML, you have to modify your insertion line to:

    document.getElementById("demo").innerHTML += "<option>" + options[i] + "</option>";

    You were missing the document., because getElementById is a function of the document object. And between innerHTML and the new content you have to add +=, because you want to append the new text to the innerHTML property. And it has to be options[i], since you want to display the value you put into the array, not the index i.

    You can see it in action here:


    Thinking further about it, I wouldn’t do it your way. Initializing the Array is too lengthy in my opinion. You can use Array literals like so:

    var options = [
        "one", "two", "three", "four", "five", "six"

    No need to remember at which index you are adding the items.

    Inside your for-loop you are querying and modifying the DOM in every iteration. That can be SLOW. It’s better to prepare the changes in a variable and change the DOM once:

    var newHTML = "";
    // for-loop: append new items to newHTML
    document.getElementById("demo").innerHTML = newHTML;

    Also, you have a fixed upper index in your for-loop, which can later be the reason for bugs

    for (var i = 0; i < 6; i++)

    This is better:

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

    However, there is a functional alternative. In jQuery and Javascript 1.6+, the Array objects has the map-function, which essentially calls a function for every item and returns an array with all the results. Which is exactly what you are trying to do – map the names of the options “one”, “two”, … to actual HTML code “<option>one</option>”, … . function(value) { return "<option>" + value + "</option>" })

    Afterwards, you can just join the resulting array with .join(separator)

    Take a look here:

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.