8

I have several textboxes with the class output. I would like to be able to print their values as a plain HTML list in a div with ID combined. Right now, I have the following code:

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 textbox is showing up. I read somewhere that [i] will show all the values, but that doesn't seem to work.

What am I doing wrong?

Deepak Ingole
  • 14,912
  • 10
  • 47
  • 79
user2863271
  • 85
  • 1
  • 1
  • 4
  • GetElementsByClassName returns a NodeList, you need to iterate through the result – Benjamin Gruenbaum Oct 10 '13 at 07:49
  • The reason is that document.getElementsByClassName returns an array of all the elements with the class name "output". so you need to tell withe index that which element you want to access. – Let me see Oct 10 '13 at 07:49

7 Answers7

8

getElementsByClassName returns 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:

document.getElementsByClassName('output')[0].value + ","
Barmar
  • 741,623
  • 53
  • 500
  • 612
8

getElementsByClassName

Returns a set of elements which 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.

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 + ",";
}
Deepak Ingole
  • 14,912
  • 10
  • 47
  • 79
2

getElementsByClassName returns a set of elements. You need to iterate over it:

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.

CodingIntrigue
  • 75,930
  • 30
  • 170
  • 176
1

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

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
opalenzuela
  • 3,139
  • 21
  • 41
1

getElementsByClassName will return a set of elements. Refer: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName#Summary. Some browsers return HTMLCollection and some browsers return NodeList. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection#Browser_compatibility But they both have length property and item method in common. So you can iterate like this.

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
  • 233,700
  • 52
  • 457
  • 497
0

getElementsByClassName returns an NodeList. So you won't be able to call the value method on it. Try the following:

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
  • 594
  • 4
  • 11
0

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>
monsieurchico
  • 1