Javascript 使用text方法获取元素的文本，然后检查条件，但未获得适当的输出

作业Q1
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var text=$（this.text（）；
console.log（文本）；
如果（文本=='night'）{
$（'body'）.css（'background-color'，'black'）；
$（此）.text（'day'）；
console.log（文本）；
}否则{
$（'body'）.css（'background-color'，'white'）；
$（this.text（'night'）；
console.log（文本）；
}
});
});
夜

问题是因为从方法调用接收到的

text（）

周围有空格，因此它与正在比较的

'night'

字符串不匹配

要解决此问题，请使用

trim（）

删除空白：

$（函数（）{
$（“按钮”）。单击（函数（）{
var text=$（this.text（）.trim（）；
如果（文本=='night'）{
$（'body'）.css（'background-color'，'black'）；
$（此）.text（'day'）；
}否则{
$（'body'）.css（'background-color'，'white'）；
$（this.text（'night'）；
}
console.log（文本）；
});
});

夜
问题在于
按钮在HTML中看起来像这样：

  <button>
        night
    </button>

或者对生成的
文本调用
.trim（）
：



作业Q1
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var text=$（this.text（）；
console.log（文本）；
如果（text.trim（）=='night'）{
$（'body'）.css（'background-color'，'black'）；
$（此）.text（'day'）；
console.log（文本）；
}否则{
$（'body'）.css（'background-color'，'white'）；
$（this.text（'night'）；
console.log（文本）；
}
});
});
夜
它怎么了？它似乎可以工作。是的，它可以工作，但是当你第一次点击按钮时，没有输出，第二次点击后，一切正常，我无法理解第一次单击时发生了什么。正如我注意到的，第一次单击后空格会自动修剪，但这是默认功能还是什么？请注意，在从DOM读取文本时，始终最好使用
trim（）
，因为很容易将意外返回添加到HTML，这没有明显的区别，但会破坏你的JS。
<button>night</button>