What the hell is happening here?

HTML & CSS
#1

Hi,

Bildschirmfoto 2023-01-08 um 15.41.17
Bildschirmfoto 2023-01-08 um 15.41.171968×267 87.2 KB

Who can explain this to me? I have an input field with value=“2” and in the shown value in the screen is “undefined” and I can even edit this undefined if I select it.

the HTML is

<input class = "transportDaysValue editOutput" id = "editOrderTransportDays" type = "text" value = "2" readonly>

and the CSS

>.transportDaysLabel {
                    grid-column: 6 / 9;
                    grid-row: 3;
                    margin: 10px 0 0 0;

                    text-align: right;
                    display: inline-block;
                    >.transportDaysValue
                    {
                        display: inline-block;
                        text-align: right;
                        width: 20px;
                    }
                }

I have no idea what is can do to debug this further. For me it looks like there is another input field with value “undefined” over the shown input field but I cannot find any in the dom.

PS: I have just added a “display: none” to the input field and the undefined is gone. So the input field seems to contain the undefined even if the Dom says its value = “2”

#2

If you execute document.getElementById("editOrderTransportDays").value in the javascript console, does it return undefined or 2?

#3

You can edit a field marked readonly? That doesnt… sound right…

#4

I notice the input has no name attribute, could that be the problem? Without a name to ID the input, the value has no key to be assigned to.

#5

Yes it returns “undefined”

Yes that’s really strange isn’t it? I have all tested in different browser but all the same

I do not use name attributes att all my html because I do not use forms. It has never been a problem as I do it that way for hundreds or more of inputs/textareas/selects etc.

I have just removed all classes and now I see a standard input field, containing “undefined” which I can edit. I am really confused

#6

Is there anything on the page that might be interacting with the field after its put into the DOM? Validators, modifiers…? (I will for the moment handwave the idea of using a text field for a number…

#7

Ok, I got it.

in my code I set the value

document.getElementById("editOrderTransportDays").value = order.transport.transportDays;

and had an error in my backend where the attribute was named “transportdays” instead.

But this doesn’t explain to me why the browsers inspect shows me the “2” instead of the undefined.

1 Like
#8

So the browser doesnt update the value listed in the DOM, that way it can restore the value to its original if you reset the form by just reading the DOM again. (Remember when input type=“reset” was a thing? yea.)

2 Likes