将innerHTML应用于var

Question

我试图用innerHTML函数设置变量但它没有用。尝试以下代码：

error = document.querySelector("#Error").innerHTML;

和

error = document.querySelector("#Error");

然后改变文字。这样做了：

btnLogIn.addEventListener("click", function(){
  error.innerHTML="Works";
});

HTML

<div id="Error"></div>

我知道我是否应用此document.querySelector("#fontError").innerHTML="Works"; 但是我想避免这种情况，以便有更好的代码。

Answer 1

如果你正在尝试

error = document.querySelector("#Error").innerHTML;
btnLogIn.addEventListener("click", function(){
  error.innerHTML="Works";
});

它不起作用，因为error将持有innerHTML的任何值。以下是绝对可行的方法，因为它将存储对匹配对象本身的引用：

error = document.querySelector("#Error");
btnLogIn.addEventListener("click", function(){
  error.innerHTML="Works";
});

您确定HTML是否正确？

<span id="Error">ERROR TEXT WILL GO HERE</span>

Answer 2

编辑：

你的HTML错了。你需要这个：

<div id="Error"></div>

不是这个：

<div I'd="Error"></div>

关于你的其余问题：

.innerHTML是属性，不是函数，因此您无法将其转换为函数。检索时：

error = document.querySelector("#Error").innerHTML;

您只是读取该属性的值并将该字符串存储在error变量中。 error只是该点的一个字符串，与#Error对象没有任何关联。

如果您不想在事件处理程序中完成所有工作，可以提前检索#Error DOM对象，将其存储然后再使用：

var errorObj = document.querySelector("#Error");
btnLogIn.addEventListener("click", function(){
  errorObj.innerHTML="Works";
});

---

但是，最佳做法是根本不保存DOM对象或引入全局范围变量，除非有某些特定原因（在这种情况下我不会看到）。因此，这将是推荐的代码：

btnLogIn.addEventListener("click", function(){
    document.getElementById("Error").innerHTML = "Works";
});