getElementsByClassName产生错误"undefined"

Question

我有几个类名为output的文本框。我想把它们的值作为纯HTML列表打印在一个ID为combined的div中。现在，我有以下代码：

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

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

我做错了什么？

- user2863271

---

GetElementsByClassName 返回一个 NodeList，你需要遍历结果。 - Benjamin Gruenbaum

原因是document.getElementsByClassName返回一个包含所有类名为“output”的元素的数组。因此，您需要使用索引告诉它要访问哪个元素。 - Let me see

Answer 1

getElementsByClassName 返回的是一个类似数组的对象，而不是单个元素（函数名称中有复数形式）。如果你只想操作返回的第一个元素，则需要遍历它，或使用数组索引：

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

- Barmar

Answer 2

getElementsByClassName

返回所有具有指定类名的元素集合。当在 document 对象上调用时，将搜索整个文档，包括根节点。您还可以在任何元素上调用 getElementsByClassName；它将仅返回具有给定类名的指定根元素的后代元素。

因此，您应该这样做：

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

- Deepak Ingole

Answer 3

getElementsByClassName 返回一组元素。您需要对其进行迭代：

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

这就是为什么添加 [0] 起作用的原因，因为你正在访问该集合中的第一个对象。

- CodingIntrigue

Answer 4

该函数将返回所有具有该名称的元素，因为"name"属性不唯一，因此它返回一个列表（确切地说是nodeList）。

要打印出所有值，您需要添加循环。类似于

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

- opalenzuela

Answer 5

getElementsByClassName将返回一组元素。参考: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName#Summary。一些浏览器返回HTMLCollection，而一些浏览器返回NodeList。https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection#Browser_compatibility 但是它们都有相同的length属性和item方法。因此，您可以像这样迭代。

function doCombine()
{
    var listOfOutputElements = document.getElementsByClassName('output');
    var combinedItem = document.getElementById('combined');
    for (var i = 0; i < listOfOutputElements.length; i += 1) {
        combinedItem.innerHTML += listOfOutputElements.item(i).innerHTML;
    }
}

- thefourtheye

Answer 6

getElementsByClassName返回一个NodeList。因此，您将无法在其上调用value方法。请尝试以下操作：

function doCombine() {
    var combined = document.getElementById('combined');
    var outputs = document.getElementsByClassName('output');

    for(var i=0; i<outputs.length; i++){
        combined.innerHTML += outputs[i].value + ',';
    }
}

http://jsfiddle.net/FM3qH/

- dobrinov

Answer 7

试试这个：

<script type="text/javascript">
function doCombine()
{
var combined = document.getElementById('combined');
var nodeList = document.getElementsByClassName('output');
    var nodeListLength = nodeList.length;
    for (i=0;i<nodeListLength;i++) {
        combined.innerHTML += nodeList[i] + ',';
 }
 </script>

- monsieurchico

---

你正在添加nodeList[i]，这将添加元素的toString值，而不是其实际值。 - Benjamin Gruenbaum