javascript - 更改元素的文本内容

Question

我正在制作一个注册表格，如果输入与条件不匹配，我想在另一个元素中显示错误。

//input element
let field = document.getElementById("field").value.trim();
//div for showing error 
let field_error = document.getElementById("field_error").textContent;
if(field.length > 30){
field_error = "Input too long";
}

如果我编写这样的代码，它不会做任何事情，但是如果我这样写：

let field_error = document.getElementById("field_error");
if(field.length > 30){
field_error.textContent = "Input too long";    
}

为什么我不能只用 声明一个变量field_error，.textContent就像我用fieldand做的那样.value.trim()，而是.textContent稍后使用？

标签： javascript

Answer 1

该textContent属性实际上更像是一个getter/setter，可能在get 上应用一个转换（例如，每个子节点的textContent 的串联）。

在您的第一种情况下field_error，指向该 get 的结果（现在与#field_error元素无关），因此进行更改不会影响原始对象。

field同样无法设置您的值（以更新#field元素），因为它是该值的操纵副本......而不是指向 DOM 元素的指针。