JSFiddle - React, Tailwind, and code Playground

by alfannas

HTML

<div class="wrap">
<textarea id="area" maxlength="50" onkeyup="myFunction(0)"></textarea>
<div class="limit">50</div>
</div>
<div class="wrap">
<textarea id="area1" maxlength="50" onkeyup="myFunction(1)"></textarea>
<div class="limit">50</div>
</div>

CSS

.wrap{
  width:80%;
  height:200px;
  position:relative;
  border:1px solid #ccc;
}
textarea{
  width:99%;
  height:200px;
}
.limit{
  float:right;
}

JavaScript

var texta = document.getElementsByTagName("textarea");
//texta.forEach(textt);
//texta[0].onkeyup = function() {myFunction(0)};
//texta[1].onkeyup = function() {myFunction(1)};
//document.getElementsByTagName("textarea")[0].onkeyup = function() {myFunction(0)};
//document.getElementsByTagName("textarea")[1].onkeyup = function() {myFunction(1)};



function myFunction(index) {

		var max = 50;
    var x = document.getElementsByClassName("limit")[index];
    var y = document.getElementsByTagName("textarea")[index].value;
    var dlimit = max - y.length;
    
    if (dlimit < 10){
    	x.style.color = "red";
    }else{
    	x.style.color = "black";
      
    }
    x.innerHTML = dlimit; 
    //alert("keyup"+n);
}