在用户做了正确的事情后，有没有办法摆脱我在 javascript 中创建的错误消息？

Question

The code will push a message saying 'First Name Can't be empty', that is when a user clicks on a button before typing their First name. This is great, however, after they get the message, if they do type their first name and submit, the pushed message does not go away!

Is there a way for the pushed message ('First Name Can't be empty') to go away once the user has typed their first name?

Many thanks.

 const name = document.getElementById('FirstName') const lastName = document.getElementById('LastName') const email = document.getElementById('EmailAddress') const password = document.getElementById('Password') const form = document.getElementById('form') const errorElement1 = document.getElementById('error-FirstName') const errorElement2 = document.getElementById('error-LastName') const errorElement3 = document.getElementById('error-Email') const errorElement4 = document.getElementById('error-Password') form.addEventListener('submit', (e) => { let messages = [] if (name.value === '' || name.value === null) { messages.push('First Name Can\\'t be empty') } if (messages.length > 0) { e.preventDefault() errorElement1.innerText = messages.join(', ') } })

Answer 1

Clear the error element when there are no errors.

 const name = document.getElementById('FirstName') const lastName = document.getElementById('LastName') const email = document.getElementById('EmailAddress') const password = document.getElementById('Password') const form = document.getElementById('form') const errorElement1 = document.getElementById('error-FirstName') const errorElement2 = document.getElementById('error-LastName') const errorElement3 = document.getElementById('error-Email') const errorElement4 = document.getElementById('error-Password') form.addEventListener('submit', (e) => { let messages = [] if (name.value === '' || name.value === null) { messages.push('First Name Can\\'t be empty') } if (messages.length > 0) { e.preventDefault() errorElement1.innerText = messages.join(', ') } else { errorElement1.innerText = ''; } })

Answer 2

Yes, you can just use the innerHTML property of the errorElement after you use a condition to check if the submit has been done correctly

 const name = document.getElementById('FirstName') const lastName = document.getElementById('LastName') const email = document.getElementById('EmailAddress') const password = document.getElementById('Password') const form = document.getElementById('form') const errorElement1 = document.getElementById('error-FirstName') const errorElement2 = document.getElementById('error-LastName') const errorElement3 = document.getElementById('error-Email') const errorElement4 = document.getElementById('error-Password') form.addEventListener('submit', (e) => { let messages = [] if (name.value === '' || name.value === null) { messages.push('First Name Can\\'t be empty') } else { //clear messages messages = []; errorLement1.innerHTML=""; } if (messages.length > 0) { e.preventDefault() errorElement1.innerText = messages.join(', ') } })