Object.assign(), assigns min value on input but not minlength, or class

Question

I am declaring my enumerable object like so:

let inputAttributes = {"type": "text", "minlength": "3", "max": "30", "class": "form-control"};

and then assigning it like so:

Object.assign(textfieldTitle, inputAttributes);

however when I go into the inspector in google chrome my input looks like this:

<input name="metafield[key 0]" type="text" max="30">

How come only the max='30' and type='text' attribute ends up being assigned?

What is `textfieldTitle`? Is it the `input` field you've shown? — T.J. Crowder, Apr 01 '22 at 08:49
There is no `class` property. Did you mean [`classList`](//developer.mozilla.org/en/docs/Web/API/Element/classList) or [`className`](//developer.mozilla.org/en/docs/Web/API/Element/className)? There is also no `minlength` property. Did you mean [`minLength`](//developer.mozilla.org/en/docs/Web/API/HTMLInputElement#properties_that_apply_only_to_visible_elements_containing_text_or_numbers)? — Sebastian Simon, Apr 01 '22 at 08:49
omg >.< haha yeah `minLength` does the trick not `minlength` it then shows up in the html as `minlength` thank you! — BoogaBooga, Apr 01 '22 at 08:51
@BoogaBooga - If you like, you can delete the question. (My answer currently has no votes, so won't get in the way; but if someone upvotes it, and you want to delete the question, let me know and I'll delete the answer to get it out of the way.) — T.J. Crowder, Apr 01 '22 at 08:53
@T.J.Crowder i'll leave the question, guess the downvote on my Q is from not being too detailed but whatever, if someone else finds this and it helps them out then I am happy, cheers to all who responded :) good to remember that JS assigned attributes are not letter for letter what you see on the HTML — BoogaBooga, Apr 01 '22 at 08:55
@BoogaBooga See also: [What is the difference between properties and attributes in HTML?](/q/6003819/4642212). — Sebastian Simon, Apr 01 '22 at 08:58

score 2 · Accepted Answer · edited Apr 01 '22 at 09:34

The HTMLInputElement doesn't have a class or minlength property. The reflected properties for those attributes are className (inherited from Element) and minLength (note the capital L). So you'd have to either use those names in your original object, or write your own assignment function that translates the names. (Or write your own assignment function that uses setAttribute instead, but I wouldn't do that.)

In a comment you've said:

...good to remember that JS assigned attributes are not letter for letter what you see on the HTML

They are if you set attributes, via setAttribute. For instance:

theElement.setAttribute("class", "new value");

That works correctly (on all but obsolete versions of the obsolete Internet Explorer).

What you're seeing is that the property that reflects an attribute doesn't always have exactly the same name as the attribute. (className [class] and htmlFor [for] are the classic examples.) This is because in JavaScript prior to ES5, you couldn't use class or for or other reserved words as literal property names (obj.class = "x"), though the version using brackets notation was (obj["class"] = "x"). So the reflected properties for class and for were made className and htmlFor (there's a third one at least on one of the element subtypes; it's not immediately coming to me).

Object.assign(), assigns min value on input but not minlength, or class

1 Answers1