getElementById to getElementsByClassName

Question

I have this code which is working. But it is only for one textarea because it uses ID. However i would like to use this for all textareas that on my code. I have tried getElementsByClassName but it didn't work.

HTML:

<textarea id="textarea1" class="form-control page-textarea" rows="4" style="height:92px;" name="memory" placeholder="new comment..."></textarea>

JS:

<script type="text/javascript">
  var textarea = document.getElementById("textarea1");
  var limit = 200;

textarea.oninput = function() {
  textarea.style.height = "";
  textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";

  if(textarea.style.height == "92px"){
    textarea.style.overflow = "hidden";
  } else if(textarea.style.height < limit  + "px"){
    textarea.style.overflow = "hidden";
  } else {
    textarea.style.overflow = "auto";
  }
};
</script>

How do i do this?

`getElementsByClassName` returns an array-like object of all child elements which have all of the given class names. You will have to loop through all the child elements. — bobthedeveloper, May 23 '14 at 07:37
You say that the code which doesn't work uses `getElementsByClassName`, but the code you have shown us doesn't. Show us the code that does not work! — Quentin, May 23 '14 at 08:14

bobthedeveloper · Accepted Answer · 2014-05-23T08:21:21.730

3

If you take a look at the docs you'll see that getElementsByClassName returns a HTMLCollection. You will have to loop through all the child elements to make it work.

var textareas = document.getElementsByClassName("form-control page-textarea");
var limit = 200;

for(var i=0, length= textareas.length; i < length; i++){
   var textarea = textareas[i];
   textarea.oninput = function() {
    this.style.height = "";
    this.style.height = Math.min(this.scrollHeight, limit) + "px";

    if(this.style.height == "92px"){
      this.style.overflow = "hidden";
    } else if(this.style.height < limit  + "px"){
      this.style.overflow = "hidden";
    } else {
      this.style.overflow = "auto";
    }
  };
}

FIDDLE

edited May 23 '14 at 08:21

answered May 23 '14 at 07:39

bobthedeveloper

3,733
2
15
31

unfortunately, it didn't work – suyilmaz May 23 '14 at 07:59
please define 'it didn't work' – bobthedeveloper May 23 '14 at 08:00
1

that's too bad then... – bobthedeveloper May 23 '14 at 08:06
my code works for only one, your code does not even work for one. – suyilmaz May 23 '14 at 08:07
Works for me though, check the fiddle. – bobthedeveloper May 23 '14 at 08:24

score 1 · Answer 2 · answered May 23 '14 at 08:35

I thing event delegation is much better approach in this situation. Check this code.

document.addEventListener('input', function(event) {
    var limit = 200;
    if(event.target.getAttribute("class") == "form-control page-textarea") {
      var target = event.target;
      target.style.height = "";
     target.style.height = Math.min(target.scrollHeight, limit) + "px";

     if(target.style.height == "92px"){
       target.style.overflow = "hidden";
     } else if(target.style.height < limit  + "px"){
       target.style.overflow = "hidden";
     } else {
       target.style.overflow = "auto";
     }   
    }
}, false);

Here is working jsFiddle. http://jsfiddle.net/yg6sS/5/ In this way we save loop trought elements.

score -2 · Answer 3 · edited May 23 '14 at 08:36

-2

 use jquery to easily solve this 
    $(function() {
            $("textarea").css("border", "3px solid red");

                              (OR)
            $("textarea").css('border':'3px solid red','color':'Green');
    });

edited May 23 '14 at 08:36

lispmachine

4,407
1
22
31

answered May 23 '14 at 08:13

Mani

36
7

getElementById to getElementsByClassName

3 Answers3