JavaScript "undefined"输出问题

Question

我拥有创建新 div 并添加innerHTML 的所有代码。其中，我想添加从 XML 文件生成的下拉列表。我在 inside.HTML 中动态创建标签时遇到问题。

现在，这都是动态的，用户应该根据需要添加新元素。因此，作为解决方法，我有一堆相互处理的 var 值，因此事物对应于相同的 ID。

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

我想要添加的标签也在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>";

}

只要在我的 HTML 页面上进行此处理，它就会在标签之间显示为“未定义”。

为什么？

Answer 1

您的代码有很多问题(尽管我只看到了其中的一部分)。

关于行 var loadOp = selectIDA.addOption();...

1. 当此行执行 javascript 时，尝试执行 selectIDA 对象上名为 addOption() 的函数。然而，selectIDA 变量实际上是一个没有 addOption() 函数的字符串。由于 javascript 在 selectIDA 对象上找不到名为 addOption() 的函数，因此它将 loadOp 的值设置为 undefined。
2. 此外，即使您改为编写 var loadOp = addOption();，loadOp 的值仍然是未定义的，因为 addOption() code> 不返回任何值。

也许你应该尝试更多这样的事情......

// 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);​

查看 jsFiddle 上的工作示例:http://jsfiddle.net/Nxezs/