What am I doing wrong?

[Attila Hajzer]

http://codepen.io/attilahajzer/pen/yKeIf

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?

[Kuzyo]

Hi, I made it in this way http://codepen.io/Kuzyo/pen/pxylj

[gowda24]

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";
</code></pre>

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

<p>}
});`

[gowda24]

$(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 />
document.getElementById(“demo”).add(newItem);

}
});

[dgriesel]

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: http://codepen.io/anon/pen/HCAIt

[dgriesel]

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>”, … .

options.map( function(value) { return "<option>" + value + "</option>" })

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

Take a look here: http://codepen.io/anon/pen/fHCpg

[Author]

Posts