Question

如果单击“显示值”按钮，它将文本字段值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更改。）

Answer 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>

Answer 2

您要使用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>

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

2 个答案: