清除錯誤消息，而不是附加JavaScript

Question

我要以這種HTML格式警告用戶，他必須在輸入框中輸入一個級別，如果他再次單擊該按鈕，我想清除錯誤消息並再次打印出來。 我還想添加更多錯誤消息，但是我添加為錯誤消息的所有內容都會附加到上一條消息的末尾。

 function validateForm () { var msg = "" , result = true; if (document.ExamEntry.name.value === "") { msg = document.createTextNode("You Must Indicate Your Level"); document.getElementById('name-msg').appendChild(msg); document.getElementById('name-msg').style.color="red"; } } 

 <form name="ExamEntry" method="POST"> <input type="text" id="name" name="name"> <span id="name-msg"></span> <input type="button" name="submit" value="Submit" onclick="validateForm();"> </form> 

這是一個jsbin

Answer 1

這是你要找的東西嗎？

 function validateForm(){ var result = true; var msg = ""; if(document.ExamEntry.name.value===""){ msg = document.createTextNode("You Must Indicate Your Level"); var span = document.getElementById('name-msg'); while( span.firstChild ) { span.removeChild( span.firstChild ); } span.appendChild(msg) document.getElementById('name-msg').style.color="red"; } else { var span = document.getElementById('name-msg'); while( span.firstChild ) { span.removeChild( span.firstChild ); } } } 

 <form name="ExamEntry" method="POST"> <input type="text" id="name" name="name" /><span id="name-msg"> </span> <input type="submit" name="submit" value="Submit" onclick="validateForm();" /> </form> 

Answer 2

 function validateForm () { var result = true; if (document.ExamEntry.name.value === "") { document.getElementById('name-msg').innerHTML= "You Must Indicate Your Level"; document.getElementById('name-msg').style.color="red"; } } 

 <form name="ExamEntry" method="POST"> <input type="text" id="name" name="name"> <span id="name-msg"></span> <input type="button" name="submit" value="Submit" onclick="validateForm();"> </form> 

Answer 3

您可以像清除HTML

 function validateForm() { var result = true; var msg = ""; if (document.ExamEntry.name.value === "") { msg = document.createTextNode("You Must Indicate Your Level"); document.getElementById('name-msg').appendChild(msg); document.getElementById('name-msg').style.color = "red"; } else { document.getElementById('name-msg').innerHTML = ''; } } 

 <form name="ExamEntry" method="POST"> <input type="text" id="name" name="name" /><span id="name-msg"></span> <input type="button" name="submit" value="Submit" onclick="validateForm();" /> </form> 

Answer 4

您可能使用innerHTML ：

 function validateForm() { var msg = "", result = true; if (document.ExamEntry.name.value === "") { msg = "You Must Indicate Your Level"; } document.getElementById('name-msg').innerHTML = msg; } 

 #name-msg { color: red; } 

 <form name="ExamEntry" method="POST"> <input type="text" id="name" name="name"> <span id="name-msg"></span> <br/> <input type="button" name="submit" value="Submit" onclick="validateForm();"> </form>