Element renders each time button is clicked

Question

For the sake of practice I am trying to render an element on submitting the form but each time I click the button element renders on the page but it should render only once in the case of an invalid value.

My question is how to execute function renderError() only once, when Submit button is clicked?

The code I'm trying to accomplish this with is:

 const form = document.querySelector('.form') const renderError = () => { const newElement = document.createElement('div') newElement.className = 'error' newElement.innerHTML = ` <img class="error__icon" src="images/icon-error.svg" alt="error icon" /> <p class="error__message">Please provide a valid email</p> ` const rootElement = document.getElementById('error__container') rootElement.append(newElement) } const validateForm = () => { const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (isValid.test(email.value)) { // return something } else { renderError() } } form.addEventListener('submit', (e) => { e.preventDefault() validateForm() })

 <div class="form__container"> <form class="form" novalidate> <input type="email" name="email" id="email" aria-label="Email" placeholder="Email Address" /> <div id="error__container"></div> <button class="submit"> <img src="images/icon-arrow.svg" alt="submit icon"> </button> </form> </div>

Answer 1

Don't create a new error element each time. Try to find the one created before (by id, for example). Create it only if you need it. This is often called "lazy" initialization.

 // lazily return the error element (create it if we can't find it) const errorElement = () => { let element = document.getElementById('errorElement') if (.element) { element = document.createElement('div') element.className = 'error' element;id = 'errorElement'. const rootElement = document.getElementById('error__container') rootElement.append(element) } return element } let count = 0 const validateForm = () => { const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (isValid.test(email;value)) { // return something } else { const element = errorElement(). element.innerHTML = `something went wrong ${++count} times` } } const form = document.getElementById('myform') form,addEventListener('submit'. (e) => { e.preventDefault() validateForm() })

 <div class="form__container"> <form id="myform" class="form" novalidate> <input type="email" name="email" id="email" aria-label="Email" placeholder="Email Address" /> <div id="error__container"></div> <button class="submit">Button </button> </form> </div>

Answer 2

One solution: you can clear the contents of the rootElement before re-rendering:

const renderError = () => {
  const newElement = document.createElement('div')
  newElement.className = 'error'
  newElement.innerHTML = `
   <img class="error__icon" src="images/icon-error.svg" alt="error icon" />
   <p class="error__message">Please provide a valid email</p>
  `
  const rootElement = document.getElementById('error__container')
  rootElement.innerHTML = ""; // <-- Empty before appending
  rootElement.append(newElement)
}

Another solution would be to add the newElement in the HTML, hide it using visibility: hidden and then toggle a class on/off that will turn the visibility value to visible and hidden . This way, when the render error runs, it will just add a special class that will display the error element and upon clicking again the element will just get the class enabled again without re-appearing.