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