Question

我需要一些澄清，因为我设法让自己感到困惑。我们假设我们有以下代码：

CREATE TABLE foo 
( id            BIGINT UNSIGNED NOT NULL AUTO_INCREMENT
, description   VARCHAR(80)
, datemodified  DATETIME  
, ...
, CONSTRAINT foo_UX1 UNIQUE KEY (id) 
)
;

INSERT INTO foo (id, description, datemodified)
VALUES 
(NULL,'toaster',NOW())
,(NULL,'blender',NOW())
,(NULL,'coffee maker',NOW())
;

此代码首先将DOM元素（按钮和textarea）收集到各自的变量中。稍后在代码中，按下按钮时，var textarea = document.getElementById("myTextarea"); var button = document.getElementById("myButton"); button.addEventListener("click", function() { var words = textarea.value; console.log(words); }将放入变量textarea.value。公平得对吗？

我的问题是为什么没有任何东西登录到控制台？在页面加载后，将从DOM创建并存储textarea变量，这可能是在用户有时间将任何内容写入textarea之前。这意味着words应该等于textarea.value（无），而不是用户按下按钮时textarea中的字符串。

如果有人能为我清除这一点，我将不胜感激。

谢谢：）

Answer 1

这意味着textarea.value应该等于''（无），而不是用户按下按钮时textarea中的字符串。

都能跟得上！

输入元素的value属性根据用户输入或其他更改它的代码动态更新。访问value属性时很重要。因为在单击按钮时访问它，所以在单击按钮时会读取元素上设置的值。

但是如果你做了这样的事情：

var textarea = document.getElementById("myTextarea");
var words = document.getElementById("myButton").value;

button.addEventListener("click", function() {
    console.log(words);
}

然后将更早地读取该值（可能是空白，但可以是默认值，自动保存变量，或者之前设置的其他内容），并且将忽略用户的更改。

Answer 2

看看2个jsfiddles。

<input id = "myTextarea"/>
<button id= "myButton" type="submit"> test </button>
var textarea = document.getElementById("myTextarea");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
    var words = textarea.value;
    console.log(words);
});

在first中，您正在捕获点击事件中文本区域的值。因此，您将获得已输入的值。

<input id = "myTextarea"/>
<button id= "myButton" type="submit"> test </button>
var textarea = document.getElementById("myTextarea");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
    console.log(words);
});

在second小提琴中，只要加载DOM就会捕获值，而不会等待click事件发生。因此，在控制台中打印的值为空。

因此，您是否会看到输入的值或什么都不会取决于捕获值的时间，事件发生后或加载DOM后的值。希望这会有所帮助。

JS - 在变量中保存DOM元素

2 个答案: