2016-03-08 63 views
0

我试图用不同的颜色显示“错误信息”,当用户在表单中输入字母而不是数字时,我使用CSS。问题是当用户纠正错误并写入一个数字时,错误消息仍然存在。我如何解决这个问题?如何清除错误信息?

<html> 
    <head> 
    <style> 
    #error {color: red;} 
    </style> 
    </head> 
    <body> 
    <p id="error"></p> 
    <p id="demo"></p> 
    <input id="demo1" type="text" /> 
    <button onclick="vote()"> Click here</button> 
    <script> 
     function vote() { 
     var age = document.getElementById("demo1").value; 
     if (isNaN(age)) { 
      document.getElementById("error").innerHTML = "Input Error!!"; 
     } else { 
      document.getElementById("demo").innerHTML = (age < 18) ? "Too young to vote" : "Old enough to vote"; 
     } 
     } 
    </script> 
    </body> 
</html> 
+2

在你的'else'子句中,改变'error'的'innerHTML'就像wh你正在设置错误信息。只需将其设置为空字符串:'“”'。 –

回答

0

添加document.getElementById("id").innerHTML = "";清理之前处理新的条目:

function vote() { 
 

 
    var aaa = document.getElementById("error"); 
 
    var bbb = document.getElementById("demo"); 
 
    
 
aaa.innerHTML = ""; 
 
bbb.innerHTML = ""; 
 
    
 
    var age = document.getElementById("demo1").value; 
 
    if (isNaN(age)) { 
 
    aaa.innerHTML = "Input Error!!"; 
 
    } else { 
 
    bbb.innerHTML = (age < 18) ? "Too young to vote" : "Old enough to vote"; 
 
    } 
 
}
body { 
 
    background: lavender; 
 
} 
 

 
#error { 
 
    color: red; 
 
}
<input id="demo1" type="text" /> 
 
<button onclick="vote()"> Click here</button> 
 
<p id="error"></p><p id="demo"></p>

0

,你可以输入添加keyup事件所以它会检查每一个字符

<input id="demo1" type="text" onkeyup="validate()" /> 

function validate() { 
    if (isNaN(age)) { 
     document.getElementById("error").innerHTML = "Input Error!!"; 
    } else { 
     document.getElementById("error").innerHTML = ""; 
    } 
}