javascript - getElementsByClassName 产生错误“未定义”

Question

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

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

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

我究竟做错了什么？

score 8 · Accepted Answer

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

score 7 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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/

score 0 · Accepted Answer

尝试这个：

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

javascript - getElementsByClassName 产生错误“未定义”

7 回答 7

getElementsByClassName

Related

Reference