Can't see updated HTML input value from Javascript

Question

If I click the "Show Value" button, it copies the text field value 0.75 to a result label.

But if I change the text field value to something else and click "Show Value", I still get 0.75.

Why is it that the input element's value attribute doesn't change based on the value of the input box?

document.addEventListener("DOMContentLoaded", function(event) {
   var form = document.getElementById('theform');
   var edit = form.querySelector("input.parameter");
   var btn = form.querySelector("input.showit");
   var result = document.getElementById("result");
   var n = 0;
   btn.addEventListener("click", function(event) {
     ++n;
     result.textContent = "Result: "+edit.getAttribute("value")+" (click #"+n+")";
   });
});

<div class="container">

<form id="theform">
  <label for="R">R</label>
  <input type="number" class="parameter" name="R" value="0.75">
  <input type="button" class="showit" value="Show Value">
  <label id="result">Result: </label>
</form>
</div>

(It's not just Javascript; if I look at the page in Chrome and open an Inspect window, the element's value never changes from 0.75.)

Try `edit.value` instead of reading the attribute with `edit.getAttribute("value")`. — Markus Zeller, Mar 15 '19 at 18:52

Pranav C Balan · Accepted Answer · 2019-03-15T18:52:59.943

It's actually updating the value property of the DOM element and not the value attribute. To make it works use value property of the DOM element.

document.addEventListener("DOMContentLoaded", function(event) {
  var form = document.getElementById('theform');
  var edit = form.querySelector("input.parameter");
  var btn = form.querySelector("input.showit");
  var result = document.getElementById("result");
  var n = 0;
  btn.addEventListener("click", function(event) {
    ++n;
    result.textContent = "Result: " + edit.value + " (click #" + n + ")";
  });
});

<div class="container">

  <form id="theform">
    <label for="R">R</label>
    <input type="number" class="parameter" name="R" value="0.75">
    <input type="button" class="showit" value="Show Value">
    <label id="result">Result: </label>
  </form>
</div>

oh, so the `value` property is the current value whereas `value` is just the initial value? — Jason S, Mar 15 '19 at 18:51
@JasonS : yes, when you reset the form then it will revert back to the attribute value — Pranav C Balan, Mar 15 '19 at 18:52

score 1 · Answer 2 · answered Mar 15 '19 at 18:50

You want to use edit.value not edit.getAttribute('value').

edit.getAttribute('value') is getting the attribute value and not the current value since modifying the input doesn't actually update the default attribute's value.

document.addEventListener("DOMContentLoaded", function(event) {
   var form = document.getElementById('theform');
   var edit = form.querySelector("input.parameter");
   var btn = form.querySelector("input.showit");
   var result = document.getElementById("result");
   var n = 0;
   btn.addEventListener("click", function(event) {
     ++n;
     result.textContent = "Result: "+edit.value+" (click #"+n+")";
   });
});

<div class="container">

<form id="theform">
  <label for="R">R</label>
  <input type="number" class="parameter" name="R" value="0.75">
  <input type="button" class="showit" value="Show Value">
  <label id="result">Result: </label>
</form>
</div>

Can't see updated HTML input value from Javascript

2 Answers2