javascript - How to change maxlength attributes for all classes of "field answer"

Question

I have a class named "field answer" which has an attribute "maxlength" of 250. I want to change this to 9999 for each occurrence of this maxlength attribute.

<div class="field answer">
   <textarea name="ctl00$Main$ctrl_16161" rows="2" cols="20" id="ctl00_Main_ctrl_16161" class="long" 
    onkeyup="return cw.Utilities.trimLength(this)" maxlength="250" style="resize: none; height: 61px; 
    overflow-y: hidden;"></textarea>
</div>

I am a total noob when it comes to this so please understand. I've tried the following but no luck.

var fieldAnswer = document.getElementsByClassName("field answer");
if (fieldAnswer.namedItem = "maxlength") {
  fieldAnswer.maxlength = 9999;

The only thing that seems to work is when I call each tag individually like the following:

$(function() {
$("#ctl00_Main_ctrl_16161").attr("maxlength",9999);});

question from:https://stackoverflow.com/questions/65905244/how-to-change-maxlength-attributes-for-all-classes-of-field-answer

Answer 1

The maxlength attribute is on the textarea, not the div.field element. In addition note that your jQuery is using a selector which is generated by ASP.Net and may change. As such you can achieve what you require most simply by selecting the textarea elements as a child of the parent div.field and updating all of them at once:

jQuery($ => {
  $('div.field.answer textarea').prop('maxlength', 9999);
});