Can't see updated HTML input value from Javascript [duplicate]

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
– Markus Zeller, Commented Mar 15, 2019 at 18:52

Pranav C Balan · Accepted Answer · 2019-03-15 18:52:59Z

1

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>

edited Mar 15, 2019 at 18:52

answered Mar 15, 2019 at 18:49

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason S Over a year ago

oh, so the value property is the current value whereas value is just the initial value?

Pranav C Balan Over a year ago

@JasonS : yes, when you reset the form then it will revert back to the attribute value

Get Off My Lawn · Accepted Answer · 2019-03-15 18:50:08Z

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>

Collectives™ on Stack Overflow

Can't see updated HTML input value from Javascript [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related