Question

I have all of this code that creates new divs and adds innerHTML. Within that, I want to add dropdowns with generated from an XML file. I’m having an issue with dynamically creating the tags inside of inner.HTML.

Now, this is all dynamic and the user is supposed to add new elements as needed. So, as a work around, I have a bunch of var values that process along with each other so things correspond to the same ID’s.

var opselectCounterA = '1';
var opselectCounterB = '1';
var selectCounter = '1';

The tag that I want to add is also within an inner.HTML.

something.innerHTML = "<select id='partSelect" + (selectCounter++) + "'>" + (loadOp) + "</select>";

var selectIDA = "partSelect" + opselectCounterA++;
var selectIDB = "partSelect" + opselectCounterB++;
var loadOp = selectIDA.addOption();

function addOption(){

    selectIDB.innerHTML = "<option>Please work.</option>";

}

Whenever this processes on my HTML page, it shows between the tags as “undefined”.

Why for?

Answer 1

There are quite a few things wrong with your code (even though I am only seeing a portion of it).

Regarding the line var loadOp = selectIDA.addOption();…

1. When this line executes javascript tries to execute a function named addOption() which exists on the selectIDA object. However the selectIDA variable is actually a string that doesn’t have a addOption() function. Because javascript doesn’t find a function named addOption() on the selectIDA object, it sets the value of loadOp to undefined.
2. Additionally, even if you had written var loadOp = addOption(); instead, the value of loadOp would still be undefined because addOption() doesn’t return any values.

Perhaps you should try something more along these lines…

// Function takes a select element and some text as args
// then adds option elements to the select
function addOption(select, optionText) {
  var option = document.createElement("option");
  option.innerText = optionText;
  select.appendChild(option);
}


var opselectCounterA = 1;
opselectCounterA++;

var selectIDA = "partSelect" + opselectCounterA;

// Create the select element
var selectA = document.createElement("select");
selectA.setAttribute("id", selectIDA);

// Add options to that select element
addOption(selectA, "My First Option");
addOption(selectA, "My Second Option");
addOption(selectA, "My Third Option");

// Add the select element to the body
document.body.appendChild(selectA);​

View the working example on jsFiddle: http://jsfiddle.net/Nxezs/