如果我设置 \`let x = document.getElementById("inputText").value\` 并更新 \`x\`，为什么值不更新？

Question

在以下示例中，为什么 ID 为 test 的输入的 value 属性没有更新为 "second"

 document.getElementById("test").addEventListener("click", () => {
  let test = document.getElementById("test").value;

  test = "second";
  console.log(test); // Logs "second", but input value is not updated.
});

 <label>Click on this test input: <input type="text" id="test" value="first"></label>

原文由 sapiensgladio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

因为 Javascript 将 x 分配为值而不是对原始对象的引用。

例如，您可以改为：

 function setText(x) {
    document.getElementById('test').value = x;
}

getText = function() {
    return document.getElementById('test').value;
}

并且您使用 setText() 设置的值将由 getText() 反映，因为 getText() 也将使用值的引用对象，而不是副本 a

编辑

正如 Bryan 指出的那样，这将是一个全局范围内的引用副本：

 var test = document.getElementById('test');

function setText(x) {
    test.value = x;
}

getText = function() {
    return test.value;
}

http://jsfiddle.net/nLj2A/

原始 test 变量存储对元素的引用，而不是与元素属性相关联的值。

原文由 Jared Farrish 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您正在将值复制到变量。更改变量不会更改原始变量，因为变量只包含一个副本。

如果将元素的引用存储在变量中，则可以使用它来设置值：

 var test = document.getElementById('test');
test.value = "second";

原文由 Guffa 发布，翻译遵循 CC BY-SA 3.0 许可协议