getElementsByClassName 产生错误“undefined”

getElementsByClassName produces error "undefined"

本文关键字：undefined 错误 getElementsByClassName      更新时间：2023-09-26

我有几个textboxes类output。我希望能够在带有ID combined的div中将它们的值打印为纯 HTML 列表。现在，我有以下代码：

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

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

我做错了什么？

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 + ",";
}

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

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

getElementsByClassName 返回一组元素。您需要遍历它：

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

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

此函数将返回具有该名称的所有元素，因为"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

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

试试这个：

<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 返回一个 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/

相关文章：