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);});

I have a class named "field answer" => no, you have two classes, `field` and `answer`. ...which has an attribute "maxlength" of 250 => no, that is your textarea's attribute. I need to reference this in a separate js file that being called from an XML file => you cannot call a JS file from an XML file. — Wais Kamal, Jan 26 '21 at 16:32
`$(".field.answer").find("textarea").attr("maxlength", 9999)` — freedomn-m, Jan 26 '21 at 16:36
Note also that you've used `getElementsByClassName` - getElement__s__ByClassName - you'll be returned an HTMLCollection (similar to an array). Try debugging your variables to see what you actually have. — freedomn-m, Jan 26 '21 at 16:36
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Jan 26 '21 at 16:38
Worth noting: https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName#matching_multiple_classes `.getElementsByClassName("c1 c2")` is the (semi-)equivalent of `$(".c1.c2")` so that part is correct — freedomn-m, Jan 26 '21 at 16:39
@terrymorse your edits (which OP already rolled back once!) make assumptions on OPs behalf that they have not confirmed - in fact they have denied by rolling back. If OP truly thinks they have a div with attribute maxlength then changing their wording in the question will not help. — freedomn-m, Jan 26 '21 at 16:42
@freedomn-m OP states `I have a class named "field answer" which has an attribute "maxlength" of 250`, which is contradicted by the OP's posted code. Is it wrong to correct the text to match the OP's code? I'll be glad to roll back the edit, but the original statement makes no sense. — terrymorse, Jan 26 '21 at 16:53
*Personally*, I wouldn't change the meaning of OPs question/code other than grammar/typos, maybe add jquery to a snippet, just from the edit-queue where rejects are due to "conflicts with author's intent" (which this seems to be to me). I'd likely berate them in the comments and ask them to clarify (by themselves). Like: "your code and questions bear no resemblance, please clarify". With a close vote if they don't fix it in 10mins or so (if I remember / still have the question open), maybe a downvote if they argue too much (like in this case where you have clarified but they've rolled back). — freedomn-m, Jan 26 '21 at 17:02
@terrymorse In the past I've made a minor edit to a question - which then inadvertently fixed the question (so essentially answered the question by changing it) - so just caution of this. This *could* be a similar case where OP is trying to change a prop on a div. Changing the question wording could answer the question in this case. — freedomn-m, Jan 26 '21 at 17:04
@freedomn-m Thanks for your very sensible feedback. I'll be more conservative with my question edits in the future. — terrymorse, Jan 26 '21 at 17:08
Thank you @freedomn-m that did exactly what I wanted it to do. — zanzibarjack, Jan 26 '21 at 17:17

terrymorse · Answer 1 · 2021-01-26T19:28:48.630

Using vanilla JavaScript, this will find all textarea elements contained within any <div class="field answer">, then change each maxlength to 9999:

// get all textarea elements within <div class="field answer">
const textEls = document.querySelectorAll('div.field.answer textarea');

// update maxlengths
textEls.forEach(el => {
  el.maxLength = 9999;
});

console.log('textEls:',[...textEls]);

<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>

  <textarea name="duplicate" 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>

score 1 · Accepted Answer · answered Jan 26 '21 at 16:58

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);
});

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

2 Answers2