Why does a HTML textbox show one value in the developer tool and another in the input field?

Question

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>";
    }
  }
}

I made a snippet of your code but it is unclear how your function is called here. — Mark Schultheiss, Oct 20 '22 at 22:39

ADyson · Accepted Answer · 2022-10-20T22:43:42.353

1

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.

edited Oct 20 '22 at 22:43

answered Oct 20 '22 at 22:39

ADyson

57,178
14
51
63

To be frank here what your link at the bottom indicates is you should vote to close the question as a duplicate – Mark Schultheiss Oct 20 '22 at 22:43
@MarkSchultheiss arguably yes, although I wouldn't advocate to delete this question as a result, since the title reflects a behaviour that people might search about without realising the underlying technology which drives it, which they'd need to know about in order to find the other question. – ADyson Oct 20 '22 at 22:45
Thank you very much! Being a self-taught, resorting to these assertive explanations helps much more than days reading through documentation that may not address the issue presented. – onit Oct 20 '22 at 22:49
2

@ADyson Certainly agree to not delete, and my comment was not meant to indicate no value here as your answer does arguably provide value generally an certainly to new users - just following the site guidance; and any question can be re-edited and re-opened if it is not a great match as a duplicate. I still get this question from developers with a great deal of experience. – Mark Schultheiss Oct 21 '22 at 12:15

Why does a HTML textbox show one value in the developer tool and another in the input field?

1 Answers1