无法从Javascript查看更新的HTML输入值

时间:2019-03-15 18:47:07

标签: javascript html

如果单击“显示值”按钮,它将文本字段值0.75复制到结果标签。

但是,如果我将文本字段的值更改为其他值,然后单击“显示值”,我仍然会得到0.75。

为什么input元素的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.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>

(不只是Javascript;如果我在Chrome浏览器中查看该页面并打开一个Inspect窗口,则该元素的value永远不会从0.75更改。)

2 个答案:

答案 0 :(得分:1)

它实际上是在更新DOM元素的value属性,而不是value属性。要使其正常工作,请使用DOM元素的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>

答案 1 :(得分:1)

您要使用edit.value而不是edit.getAttribute('value')

edit.getAttribute('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>