Azure返回HTML页面中条件错误消息颜色修改及显示时机问题

我遇到了一个需求场景：页面中有一个<div id="api"></div>元素，它会被Azure返回的HTML内容替换。我需要让替换后内容里的UsernameIsMissing元素（用户名缺失的错误提示）仅在用户点击Save按钮且确实存在用户名缺失的情况时，才显示为红色。

一开始我写的代码如下：

<div id="api"></div>
<script>
window.onload = changeColor();
function changeColor() {
 var errorMsg = document.getElementById('UsernameIsMissing');
 erroMsg.style = "color:red;";
}
</script>

但运行后发现，错误消息在页面加载完成后立刻就变成红色了，完全没有等到点击Save按钮的触发时机，这显然不符合需求。

问题原因分析 #

这里的核心问题有两个：

1. window.onload = changeColor(); 这行代码是立即执行了changeColor函数，而不是将函数绑定到onload事件上。就算绑定方式正确，onload触发时就修改样式，也不是我们需要的“点击按钮才触发”的逻辑。
2. 代码里还有个拼写错误：erroMsg应该是errorMsg，这也会导致样式修改失败。

解决方法 #

后来我调整了代码逻辑，给Save按钮添加点击事件监听器，只有当按钮被点击时才去修改错误消息的颜色，最终的正确代码如下：

<div id="api"></div>
<script>
window.onload = SaveBtnClickEvent();
function SaveBtnClickEvent() {
 var saveBtn = document.getElementById('SaveButton');
 saveBtn.addEventListener("click",function(){changeColor();});
 function changeColor() {
 var errorMsg = document.getElementById('UsernameIsMissing');
 errorMsg.style = "color:red;";
 }
}
</script>

这里要注意一个容易踩坑的点：我之前尝试过直接写saveBtn.addEventListener("click", changeColor(); );，这是语法错误！正确的写法有两种：

• 直接传递函数引用：saveBtn.addEventListener("click", changeColor);
• 用匿名函数包裹调用：saveBtn.addEventListener("click",function(){changeColor();});

内容的提问来源于stack exchange，提问作者JFL