I'm looking to develop a JavaScript function that can set text limits for multiple textareas at once using a class, allowing for flexibility in case specific textareas need to be exempt. However, I'm facing issues with my debuggers - Visual Studio isn't providing IntelliSense and JSFiddle isn't showing any errors. I'm struggling to figure out how to troubleshoot this situation effectively. Jquery is optional for me; I currently have a version of the code that only uses CSS ids.
$('.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/>