When I inspect an input field that has a value, the value appears empty in the debugger like this:

I was just wondering why? Debugger performance? Or perhaps something related to security? Or maybe I need to switch something on/off?

The reason why I am wondering is that it makes debugging more difficult for me in certain situations, like right now when the field loads empty while console logged .value returns the value that is supposed to load but didn't for some reason:

console.log( 'before LoadFromLocalStorage' );
console.log( 'input element:' );
console.log( document.getElementById( 'email' ) );
console.log( 'input element value:' );
console.log( document.getElementById( 'email' ).value );



document.getElementById( 'email' ).value = sessionStorage.email;


console.log( 'after LoadFromLocalStorage' );
console.log( 'input element:' );
console.log( document.getElementById( 'email' ) );
console.log( 'input element value:' );
console.log( document.getElementById( 'email' ).value );

P.S. it actually shows up in the field when I set timeout long enough. 1ms is enough in about 75% of tests, but sometimes it fails to show up even with 100ms timeout. So apparently something is going on during that time, but I have no idea what. It would be really nice if I could log when it actually appears in the input field.

---

EDIT:

I solved the problem with the empty input field. I used element.innerHTML += "a lot of html" elsewhere in my code and due to its destructive nature it wiped all the input fields before it pleted appending html. I replaced it with .insertAdjacentHTML and it worked like a charm.

When I inspect an input field that has a value, the value appears empty in the debugger like this:

I was just wondering why? Debugger performance? Or perhaps something related to security? Or maybe I need to switch something on/off?

The reason why I am wondering is that it makes debugging more difficult for me in certain situations, like right now when the field loads empty while console logged .value returns the value that is supposed to load but didn't for some reason:

console.log( 'before LoadFromLocalStorage' );
console.log( 'input element:' );
console.log( document.getElementById( 'email' ) );
console.log( 'input element value:' );
console.log( document.getElementById( 'email' ).value );



document.getElementById( 'email' ).value = sessionStorage.email;


console.log( 'after LoadFromLocalStorage' );
console.log( 'input element:' );
console.log( document.getElementById( 'email' ) );
console.log( 'input element value:' );
console.log( document.getElementById( 'email' ).value );

P.S. it actually shows up in the field when I set timeout long enough. 1ms is enough in about 75% of tests, but sometimes it fails to show up even with 100ms timeout. So apparently something is going on during that time, but I have no idea what. It would be really nice if I could log when it actually appears in the input field.

---

EDIT:

I solved the problem with the empty input field. I used element.innerHTML += "a lot of html" elsewhere in my code and due to its destructive nature it wiped all the input fields before it pleted appending html. I replaced it with .insertAdjacentHTML and it worked like a charm.

• javascript

Share Improve this question Follow edited Aug 9, 2018 at 2:18 Arthur Tarasov asked Aug 8, 2018 at 12:32 Arthur TarasovArthur Tarasov 3,81199 gold badges5050 silver badges6060 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 17

You're looking in the wrong place.

The value attribute represents the default value, which you aren't modifying.

The current value appears in the DOM value property.