时间戳

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

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

问题描述

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

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

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

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

更新：

我最终想通了。我添加了第二个函数，它为按钮上的点击事件添加了一个事件监听器。调用 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();});

标签： javascript

解决方案

您可以创建一个布尔局部变量 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>

推荐阅读