Question

我想用以下代码获取文本输入的值：

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);
}

这两者有什么不同？为什么第一个不起作用？

Answer 1

因为当您读取.value时，它就是那个时刻的值。当属性发生变化时，它不会继续更新变量。

所以当你这样做时

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

如果存储该时刻的值，那将是变量中的值。

Answer 2

这两者有什么不同？

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

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

然后反复重新记录该值：

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

将值复制到input不会在input和HTMLInputElement的{{1}}属性之间创建任何类型的持续链接。它只会将value 的值从}运行到value时复制。

在第二个示例中，您每次都会从input获得值：

HTMLInputElement

每次点击，您都会询问var input = document.getElementById('url_input'); document.getElementById("send_url").onclick = function(){ console.log(input.value); }其当前状态。请注意，HTMLInputElement中的值仍然不会在点击之间发生变化;它是对input元素的引用，它是一个对象，并且该引用在此代码中不会更改。它是对象（url_input）的状态，它会改变，并且每次都要求它的当前状态。

document.getElementById（'url_input'）。value不打印该值

2 个答案: