Question

我有几个textboxes与班级output。我希望能够使用div ID在combined中将其值打印为纯HTML列表。现在，我有以下代码：

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

然而，当我运行该函数时，我收到错误消息undefined。当我在[0]之前添加.value时，它会起作用，但只显示第一个textbox的值。我在某处读到[i]将显示所有值，但这似乎不起作用。

我做错了什么？

Answer 1

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

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

Answer 2

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 3

getElementsByClassName会返回 set 元素。你需要迭代它：

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

这就是添加[0]的原因，因为您正在访问此集合中的第一个对象。

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

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;
    }
}

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/

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>

getElementsByClassName产生错误“undefined”

7 个答案:

getElementsByClassName方法