javascript - document.getElementById ('url_input' ).value 不打印该值

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

what's the different between this two?

在第一个示例中，您将值复制到输入中:

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)的状态，并且您每次都要求它提供其当前状态。