I’ve been looking for an answer for this, but no success so far and maybe you know why this happens by just lookinng at it?
Why does the HTML textbox show one value in the developer tool and another in the input field?
The data is obtained from the server and looks like this:
let ar = [["XT434367","Flow Solid","Black","","89 poly / 11 span","",1.5,184,10.5,6],["RT547893","Element","Heather Grey","","89 poly / 11 span","",1.52,128,10.52,3]]
This is how the table is built:
function buildTable(ar, poOrigin) {
if (poOrigin == 'Fabric-Asia') {
result = "<div class='card' id='card'><table class='table table-hover table-vcenter' id='dtable'>" +
"<thead>" +
"<tr>" + //Change table headings to match witht he Google Sheet
"<th style='width:11%; text-align: left'>Fabric</th>" +
"<th style='width:8%; text-align: left'>Name</th>" +
"<th style='width:10%; text-align: left'>Color</th>" +
"<th style='width:10%; text-align: left'>Dip</th>" +
"<th style='width:10%; text-align: left'>Content</th>" +
"<th style='width:10%; text-align: left'>Construction</th>" +
"<th style='width:4%'>Width</th>" +
"<th style='width:4%'>Weight</th>" +
"<th style='width:7%'>FOB/Yd</th>" +
"<th style='width:4%'>Yards</th>" + //this is the one with the weird behavior
"<th style='width:8%'>Total FOB</th>" +
"<th style='width:5%'>Sel.</th>" +
"</tr>" +
"</thead>" +
"<tbody id='tableRows'>";
for (var i = 0; i < ar.length; i++) {
result += "<tr>";
for (var j = 0; j < ar[i].length; j++) {
result +=
(j < 6) ? "<td><input type='text' name='tableInputs' value='" + ar[i][j] + "'></td>" :
(j == 6) ? "<td><input type='number' step='0.01' min='0' class='item-table-values' name='numberInputs' value='" + ar[i][j] + "'></td>" :
(j == 7) ? "<td><input type='number' min='0' class='item-table-values' name='numberInputs' value='" + ar[i][j] + "'></td>" :
(j == 8 && poType == 'new') ? `<td><span class="dollarcurrency" >$</span><input oninput="this.value=this.value.replace(/[^0-9.,]+/gmi,'')" class="price" name="price_input" value="" onchange="add_to_total(this, getPoOrigin());deposit(getDeposit(), getPoOrigin())"></td>` :
(j == 8 && poType == 'existing') ? `<td><span class="dollarcurrency" >$</span><input oninput="this.value=this.value.replace(/[^0-9.,]+/gmi,'')" class="price" name="price_input" value="` + convertPriceUStoES(ar[i][j], getPoOrigin()) + `" onchange="add_to_total(this, getPoOrigin());deposit(getDeposit(), getPoOrigin())"></td>` :
(j == 9) ? `<td><input type="number" min="0" class="qty" name="numberInputs" value='` + ar[i][j] + `' onchange="add_to_total(this, 'Fabric-Asia');deposit(getDeposit(), 'Fabric-Asia')"></td>` :
"<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";
}
result += "<td class='total_price'><strong>$0.00</strong></td>";
result += "<td><input type='checkbox'></td>";
result += "</tr>";
}
}
}
let ar = [["XT434367","Flow Solid","Black","","89 poly / 11 span","",1.5,184,10.5,6],["RT547893","Element","Heather Grey","","89 poly / 11 span","",1.52,128,10.52,3]]
function buildTable(ar, poOrigin) {
if (poOrigin == 'Fabric-Asia') {
result = "<div class='card' id='card'><table class='table table-hover table-vcenter' id='dtable'>" +
"<thead>" +
"<tr>" + //Change table headings to match witht he Google Sheet
"<th style='width:11%; text-align: left'>Fabric</th>" +
"<th style='width:8%; text-align: left'>Name</th>" +
"<th style='width:10%; text-align: left'>Color</th>" +
"<th style='width:10%; text-align: left'>Dip</th>" +
"<th style='width:10%; text-align: left'>Content</th>" +
"<th style='width:10%; text-align: left'>Construction</th>" +
"<th style='width:4%'>Width</th>" +
"<th style='width:4%'>Weight</th>" +
"<th style='width:7%'>FOB/Yd</th>" +
"<th style='width:4%'>Yards</th>" + //this is the one with the weird behavior
"<th style='width:8%'>Total FOB</th>" +
"<th style='width:5%'>Sel.</th>" +
"</tr>" +
"</thead>" +
"<tbody id='tableRows'>";
for (var i = 0; i < ar.length; i++) {
result += "<tr>";
for (var j = 0; j < ar[i].length; j++) {
result +=
(j < 6) ? "<td><input type='text' name='tableInputs' value='" + ar[i][j] + "'></td>" :
(j == 6) ? "<td><input type='number' step='0.01' min='0' class='item-table-values' name='numberInputs' value='" + ar[i][j] + "'></td>" :
(j == 7) ? "<td><input type='number' min='0' class='item-table-values' name='numberInputs' value='" + ar[i][j] + "'></td>" :
(j == 8 && poType == 'new') ? `<td><span class="dollarcurrency" >$</span><input oninput="this.value=this.value.replace(/[^0-9.,]+/gmi,'')" class="price" name="price_input" value="" onchange="add_to_total(this, getPoOrigin());deposit(getDeposit(), getPoOrigin())"></td>` :
(j == 8 && poType == 'existing') ? `<td><span class="dollarcurrency" >$</span><input oninput="this.value=this.value.replace(/[^0-9.,]+/gmi,'')" class="price" name="price_input" value="` + convertPriceUStoES(ar[i][j], getPoOrigin()) + `" onchange="add_to_total(this, getPoOrigin());deposit(getDeposit(), getPoOrigin())"></td>` :
(j == 9) ? `<td><input type="number" min="0" class="qty" name="numberInputs" value='` + ar[i][j] + `' onchange="add_to_total(this, 'Fabric-Asia');deposit(getDeposit(), 'Fabric-Asia')"></td>` :
"<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";
}
result += "<td class='total_price'><strong>$0.00</strong></td>";
result += "<td><input type='checkbox'></td>";
result += "</tr>";
}
}
}>Solution :
To understand this behaviour, you must understand the difference between attributes and properties in the original HTML and the DOM (Document Object Model).
When you create some HTML, you may define attributes on the HTML elements. Then, once the browser parses the HTML, a corresponding object model will be created in the browser’s DOM in memory, with each element represented by a "node". This node is an object, and therefore it has properties. You can think of the DOM as the browser’s mental map of the current state of the page.
Here’s a minimal demo – the value attribute is set to 6 in the original HTML document. Then JavaScript comes along and modifies the value property of the element in the DOM. This updates the on-screen display, and the browser’s in-memory model of what the form element contains. But it doesn’t update the original attribute which was set in the HTML when the page was loaded – and that’s what you can see in the browser’s element inspector.
document.getElementById("test").value = 0;<form>
<input type="text" id="test" value="6" />
</form>Note that this doesn’t hold true for all properties – some, such as id (for example) will also update the original attribute when the DOM property is updated, but it’s not the same for value.
Please take a look at What is the difference between properties and attributes in HTML? for a more detailed explanation.