getElementsByClassName产生错误"undefined"

Question

我textboxes和班上有几个人output.我希望能够打印他们的价值观如在一个普通的HTML列表div用ID combined.现在,我有以下代码:

function doCombine() {
    document.getElementById('combined').innerHTML =
    document.getElementsByClassName('output').value + ",";  
}

然而,当我运行该函数时,我收到错误消息undefined,.当我添加[0]之前.value,它可以工作,但只textbox显示第一个的值.我读到了[i]会显示所有值的地方,但这似乎不起作用.

我究竟做错了什么？

Answer 1

getElementsByClassName方法

返回一组包含所有给定类名的元素.在文档对象上调用时,将搜索完整文档,包括根节点.您也可以在任何元素上调用getElementsByClassName; 它将仅返回具有给定类名的指定根元素的后代的元素.

所以你应该这样做

var elements = document.getElementsByClassName('output');
var combined = document.getElementById('combined');
for(var i=0; i < elements.length; i++) { 
  combined.innerHTML += elements[i].value + ",";
}

Answer 2

getElementsByClassName返回一个类似数组的对象,而不是单个元素(注意函数名称中的复数).您需要迭代它,或者如果您只想对它返回的第一个元素进行操作,则使用数组索引:

document.getElementsByClassName('output')[0].value + ","