CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-devtools
fs2005
fs2005

Reputation: 591

Chrome Dev Tools not displaying dynamic DOM updates

Can someone please tell me why I cannot view updates made to the text box in the highlighted value field on the input field?

The textbox has 'new1234' but Chrome Dev Tools say it is 'Old123'.

Here is the html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<input id="testInput" type="text" value="Old123" />
</body>
<script>
    document.getElementById('testInput').value = 'New1234';
</script>
</html>

Here is the screen shot: enter image description here

document.getElementById('testInput').value = 'New1234';
<input id="testInput" type="text" value="Old123" />

Upvotes: 3

Views: 1718

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370729

The .value property in Javascript references a property on the HTMLElement object that Javascript can interface with. Element property values do not necessarily correspond with the attributes that you can see in the browser's inspector tools. You can change an element's attribute if you wish, though, via setAttribute.

(Inspect the following snippets with your browser tools:)

document.getElementById('testInput').setAttribute('value', 'New1234');
<input id="testInput" type="text" value="Old123" />

But, while this works, it's generally better to assign to the plain Javascript property of the element, rather than change the HTML itself.

Certain property changes do change the attributes, such as when you set the id or className of an element:

const element = document.getElementById('testInput');
element.id = 'foo';
element.className = 'bar';
<input id="testInput" type="text" value="Old123" />

But assigning to .value is not one of those which change the HTML attributes as well.

Upvotes: 1

Related Questions