javascript - JS : Why . 值在一种情况下有效，但在另一种情况下无效？

Question

我有这个工作代码:

HTML

Aumentar un <input id="porcentaje">% 
<input type="button" id="aumentar" value="Aumentar" onclick="calcular()">
<br>Monto: <input id="campo">
<br> If you insert a number into the "campo" input it should be aumented 
<br>by the same aumont that says the "porcentaje" input.

JS

function calcular() {
var original = document.getElementById('campo');
var aumento = document.getElementById('porcentaje').value;
original.value = original.value*aumento/100;
}

我不明白的是为什么这个 JS 代码可以工作，而这个却不能:

function calcular() {
var original = document.getElementById('campo').value;
var aumento = document.getElementById('porcentaje').value;
original = original*aumento/100;
}

换句话说，为什么我可以使用 var original = document.getElementById('campo'); 但它不适用于 var original = document.getElementById('campo' ).value; ?但它确实适用于 var aumento = document.getElementById('porcentaje').value;。

我开始学习 JS，但我无法理解其中的区别。在这两种情况下，我都试图达到输入值，但在一种情况下它确实有效(var aumento)，而在另一种情况下它则不起作用(var original)。

Answer 1

那是因为

var original = document.getElementById('campo');

获取对输入字段的 DOM 元素的引用。它实际上是一个可以随后操作的对象。鉴于

var original = document.getElementById('campo').value;

仅获取与输入字段不再有连接/绑定(bind)的值。