JavaScript 获取元素解答

Question

第一段代码是直接获取input的value值，但是onclick事件修改value值，需要写在事件里面重新获取value值，不能实时更新input值：

const btn = document.querySelectorAll("li");
let input = document.getElementById("port").value;
   
   btn[0].onclick=function(){
      port+="1";
//不能直接修改值，需要重新获取input元素
   }

第二段代码是先获取input元素，用的时候再调用值，这个为什么就可以实时更新value值：

const btn = document.querySelectorAll("li");
let input = document.getElementById("port");
   
   btn[0].onclick=function(){
      port.value+="1";
   }

原理看起来都一样，为什么前者实现不了呢？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这两段代码的主要区别在于如何获取和使用 input 元素。让我们详细分析这两段代码的不同之处以及为什么其中之一能够实时更新 input 的值。

第一段代码：

const btn = document.querySelectorAll("li");
let input = document.getElementById("port").value;  // 获取input的值存储在变量input中

btn[0].onclick = function() {
  port += "1";  // 这里尝试修改port变量的值，但这个变量只是一个字符串，而不是input元素本身
}

在这段代码中，你将 input 元素的值保存在了一个变量中。然后当你点击按钮时，你修改的是这个变量的值，而不是实际 input 元素的值。这意味着，当你尝试更改 port 变量的值时，你实际上并没有改变 DOM 中的 input 元素的值。因此，如果你在稍后的代码中再次尝试获取 input 元素的值，你将得到你最初存储的值，而不是更新后的值。

第二段代码：

const btn = document.querySelectorAll("li");
let input = document.getElementById("port");  // 获取整个input元素存储在变量input中

btn[0].onclick = function() {
  input.value += "1";  // 直接修改input元素的value属性
}

在这段代码中，你将 input 元素本身存储在变量中。当你点击按钮时，你直接修改的是 input 元素的 value 属性。由于你正在直接操作 DOM 元素，因此任何对 value 属性的更改都会立即反映在 input 元素上。当你在稍后的代码中再次获取 input 元素的值时，你会得到更新后的值。

总结起来，问题的关键在于你是否直接操作 DOM 元素。如果你只操作变量（第一段代码），那么你只能更改变量的值，而不能更改 DOM 元素的值。如果你直接操作 DOM 元素（第二段代码），那么你可以实时更新元素的值。