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?

Answer 1

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