在javascript中更改条件错误消息的颜色时，它在页面加载时变得可见

Question

我有一个从Azure返回的HTML页面，我想在azure生成的HTML页面内的div元素上将错误消息（UsernameIsMissing）的颜色更改为红色。

只有在缺少用户名并单击“保存”按钮时才会显示错误消息。 我在（本地）HTML页面中创建了一个API div，这个API div元素正在被Azure返回的HTML页面取代。

我的问题是，当我将错误消息上的文本颜色更改为红色时，它将在页面加载时显示错误消息，而不是在单击事件之后。 为了使错误消息仅在click事件后可见，我需要做什么？

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

更新：

我终于明白了。 我添加了第二个函数，为按钮上的click事件添加了一个eventlistener。 调用changeColor函数。

<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'); 
   erroMsg.style = "color:red;"; 
 } 
</script>

我以前尝试过这个改变，但由于第二个参数上的一个小错误，它没有工作：

saveBtn.addEventListener("click", changeColor(); );

相反，第二个参数应如下所示：

saveBtn.addEventListener("click",function(){changeColor();});

Answer 1

您可以创建一个布尔局部变量clicked = false。 然后在用户单击按钮后，将变量更新为true。 在changeColor函数中检查变量的状态

let clicked = false;

//When the user clicks the button also make clicked = true;

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