javascript - 为什么 `checkInputlength` 总是返回 false？

Question

var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
var checkInputlength = input.value.length>0;

function createList() {
  if (checkInputlength) {
    var node = document.createTextNode(input.value);
    var li = document.createElement("li");
    li.appendChild(node);
    ul.appendChild(li);
  }
}

button.addEventListener("click", createList);

checkInputlength 由于某种原因总是返回 false。但是，当我将条件放入 if 语句 if (input.value.length>0) 中时，它会按预期工作。谁能告诉我为什么？

Answer 1

您所做的是检查 <input> 的长度的值一次并将结果保存为变量。在该变量的后续查找中它不会改变。从某种意义上说，您已经缓存了该值，或者在输入值的长度为 0 时通过查找一次(且仅一次)来及时卡住它。

请参阅此示例。当您输入输入时，您将看到变量没有更改，但函数返回的值会更改。

var input = document.querySelector("input");
var checkInputlength = input.value.length>0;

function returnBooleanAboutInputLength() {
  return input.value.length>0;
}

setInterval(()=>{
  console.log("returnBooleanAboutInputLength()", returnBooleanAboutInputLength())
  console.log("checkInputlength", checkInputlength)
}, 1000)

<input>