Adam R. Turner Adam R. Turner - 1 year ago 51
CSS Question

Dynamically assign character limits within textareas based on CSS classes

I'm trying to create a bit of javascript that will insert text limits without having to reference each textarea individually, but utilize a class in case there is a situation where a textarea must be omitted. My debuggers aren't behaving, visual studio can't track the intellisence, and jsfiddle doesn't report an error. I'm a bit stuck with how to debug this. I don't really care if it uses jquery or not. I have a working version of code that only utilizes css ids instead of classes.



$('.txtFeedback').html("characters remaining");
try {
$(document).ready(function() {
var textareas = document.getElementsByClassName("txtLimit");
var feedbacks = document.getElementsByClassName("txtFeedback");
var n = 0;
for (var i = 0; i < textareas.length; i++) {
var thisElem = textareas[i];
var countX = textareas[i].style.marginLeft;
$("#" + thisElem.id).keyup(function() {
var text_length = $("#" + thisElem.id).val().length; //char count
var text_remaining = $("#" + thisElem.id).maxLength - text_length;
if (countX < thisElem.maxLength) {
$("#" + feedbacks[n].id).css({
marginLeft: '+=50pt'
});
countX += 50;
}
$("#" + feedbacks[n].id).html(text_length + '/' + text_max);
});
n++;
}
});
} catch (err) {
document.getElementById("errors").innerHTML = err.message;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" class="txtLimit" rows="8" cols="30" maxlength="99" style="z-index:1;"></textarea>
<div id="textarea_feedback" class="txtFeedback" style="z-index:2; margin-top:-18pt; margin-left:50pt"></div>
<div id="errors" width=100 height=3 00/>




Answer Source

The problem is that you need to store the feedback element into a variable before you can try to get its id. I updated your snippet to do that. Also, I found that the text_max variable wasn't defined, so I arbitrarily defined that to be 300.

FYI, you can use the developer console (press F12) in JSFiddle to see errors.

EDIT: Based on the comments, I've updated text_max to be thisElem.maxLength.

$('.txtFeedback').html("characters remaining");
try {
  $(document).ready(function() {
    var textareas = document.getElementsByClassName("txtLimit");
    var feedbacks = document.getElementsByClassName("txtFeedback");
    for (var i = 0; i < textareas.length; i++) {
      var thisElem = textareas[i];
      var text_max = thisElem.maxLength;
      var feedback = feedbacks[i];
      var countX = textareas[i].style.marginLeft;
      
      $("#" + thisElem.id).keyup(function() {
        var text_length = $("#" + thisElem.id).val().length; //char count
        var text_remaining = $("#" + thisElem.id).maxLength - text_length;
        if (countX < thisElem.maxLength) {
          $("#" + feedback.id).css({
            marginLeft: '+=50pt'
          });
          countX += 50;
        }
        $("#" + feedback.id).html(text_length + '/' + text_max);
      });
    }
  });
} catch (err) {
  document.getElementById("errors").innerHTML = err.message;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" class="txtLimit" rows="8" cols="30" maxlength="99" style="z-index:1;"></textarea>
<div id="textarea_feedback" class="txtFeedback" style="z-index:2; margin-top:-18pt; margin-left:50pt"></div>
<div id="errors" width=100 height=3 00/>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download