时间戳

首页 > 解决方案 > 每次单击按钮时都会呈现元素

javascript - 每次单击按钮时都会呈现元素

问题描述

为了练习起见，我试图在提交表单时呈现一个元素，但每次单击按钮元素时都会呈现在页面上，但在无效值的情况下它应该只呈现一次。

我的问题是如何在单击提交按钮时只执行一次函数renderError() ？

我尝试使用的代码是：

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>

标签： javascriptdom-manipulation

解决方案

不要每次都创建一个新的错误元素。尝试找到之前创建的那个（例如，通过 id）。仅在需要时创建它。这通常称为“惰性”初始化。

// 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>

推荐阅读