javascript getElementsByClassName 产生错误“未定义”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19289907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getElementsByClassName produces error "undefined"
提问by user2863271
I have several textboxeswith the class output. I would like to be able to print their values as a plain HTML list in a divwith IDcombined. Right now, I have the following code:
我有几个textboxes同班output。我希望能够将它们的值打印为divwith 中的纯 HTML 列表IDcombined。现在，我有以下代码：
function doCombine() {
document.getElementById('combined').innerHTML =
document.getElementsByClassName('output').value + ",";
}
Yet, when I run the function, i get the error message undefined,. When i add a [0]before .value, it works, but only the value of the first textboxis showing up. I read somewhere that [i]will show all the values, but that doesn't seem to work.
然而，当我运行该函数时，我收到错误消息undefined，。当我添加一个[0]before 时.value，它可以工作，但只textbox显示第一个的值。我在某处阅读了[i]会显示所有值的内容，但这似乎不起作用。
What am I doing wrong?
我究竟做错了什么？
回答by Dipak Ingole
getElementsByClassName
getElementsByClassName
Returns a set of elementswhich have all the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName on any element; it will return only elements which are descendants of the specified root element with the given class names.
返回一组具有所有给定类名的元素。当在文档对象上调用时，将搜索完整的文档，包括根节点。你也可以在任何元素上调用 getElementsByClassName；它将只返回具有给定类名的指定根元素的后代元素。
So you should be doing
所以你应该做
var elements = document.getElementsByClassName('output');
var combined = document.getElementById('combined');
for(var i=0; i < elements.length; i++) {
combined.innerHTML += elements[i].value + ",";
}
回答by Barmar
getElementsByClassNamereturns an array-like object, not a single element (notice the plural in the name of the function). You need to iterate over it, or use an array index if you just want to operate on the first element it returns:
getElementsByClassName返回一个类似数组的对象，而不是单个元素（注意函数名称中的复数）。您需要迭代它，或者如果您只想对其返回的第一个元素进行操作，则使用数组索引：
document.getElementsByClassName('output')[0].value + ","
回答by CodingIntrigue
getElementsByClassNamereturns a setof elements. You need to iterate over it:
getElementsByClassName返回一组元素。你需要迭代它：
var elems = document.getElementsByClassName("output");
for(var i=0; i<elems.length; i++) {
combined.innerHTML += elems[i].value + ",";
}
That's why adding [0] works, because you are accessing the first object in this set.
这就是添加 [0] 起作用的原因，因为您正在访问该集合中的第一个对象。
回答by opalenzuela
This function will return ALL the elements with that name, because"name" attribute is not unique, so it returns an list (nodeList, to be exact).
此函数将返回具有该名称的所有元素，因为“name”属性不是唯一的，因此它返回一个列表（确切地说是 nodeList）。
To print out ALL the values, you need to add a loop. Something like
要打印出所有值，您需要添加一个循环。就像是
var finalvar = "";
var arr = document.getElementsByClassName('output');
for (i=0;i<arr.length;i++) {
finalval = finalval + arr[i].value;
}
document.getElementById('combined').innerHTML = finalval
回答by thefourtheye
getElementsByClassName will return a set of elements. Refer: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName#Summary. Some browsers return HTMLCollectionand some browsers return NodeList. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection#Browser_compatibilityBut they both have lengthproperty and itemmethod in common. So you can iterate like this.
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;
}
}
回答by dobrinov
getElementsByClassName returns an NodeList. So you won't be able to call the value method on it. Try the following:
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 + ',';
}
}
回答by monsieurchico
Try this :
试试这个 ：
<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>
