javascript - document.getElementById('url_input')。value不会显示该值

我正在尝试通过以下代码获取文本输入的值：

var input = document.getElementById('url_input').value;

和

document.getElementById("send_url").onclick = function(){
  console.log(input);
}

这不起作用，但是如果我这样改变：

var input = document.getElementById('url_input');
document.getElementById("send_url").onclick = function(){
  console.log(input.value);
}

两者有什么区别？为什么第一个不起作用？

最佳答案

两者有什么区别？


在第一个示例中，将值复制到input中：

var input = document.getElementById('url_input').value;

然后反复重新记录该值：

document.getElementById("send_url").onclick = function(){
  console.log(input);
}

将值复制到input不会在input和HTMLInputElement的value属性之间创建任何形式的持续链接。当那行代码运行到value时，它只是复制input的值。

在第二个示例中，您每次都从HTMLInputElement获取值：

var input = document.getElementById('url_input');
document.getElementById("send_url").onclick = function(){
  console.log(input.value);
}

每次单击时，您都在询问HTMLInputElement其当前状态。请注意，input中的值在两次点击之间仍然没有变化；它是对url_input元素（它是一个对象）的引用，并且该引用在此代码中没有更改。更改的是对象（HTMLInputElement）的状态，您每次都在询问其当前状态。