时间戳

首页 > 解决方案 > 需要元素时更改 CSS

javascript - 需要元素时更改 CSS

问题描述

我是一名学生开发人员，我想在单击提交按钮时显示一条消息，但仍然需要选择

<style>
    .messagerequire {
        color: red;
        display: none;
    }
</style> 

<p class="messagerequire">Test, If there is a require to submit I appear ! </p>

这里它有样式display:none，我想如果表单由于要求而无法验证，我会这样做，它会更改 CSS。

从今天早上开始，我一直在寻找答案，但我没有找到或理解。

<input type="submit" name="register" value="register">

谢谢

标签： javascriptjquery

解决方案

您需要使用 JavaScript 来实现这一点。

function submitThis(){
  let name = document.getElementById("name").value;
  
  if(name.length === 0){
    document.getElementsByClassName("error")[0].innerText = "Cannot leve name empty.";
    //Removing(hinding) the error after 5 seconds.
    setTimeout(()=>{
    document.getElementsByClassName("error")[0].innerText = "";
    }, 5000);
  }
    

}
.error {
  color: red;
}
<input type="text" palceholder="Name" id="name" required />
<br>
<br>
<p class="error"></p>
<br>
<br>
<button onclick="submitThis()">SUBMIT</button>

推荐阅读