Javascript 元素在每次单击按钮时渲染

为了练习，我试图在提交表单时呈现一个元素，但每次单击页面上的button元素时都会呈现一次，但如果值无效，则应该只呈现一次

我的问题是，当单击提交按钮时，如何只执行一次函数renderError（）

我尝试使用的代码是：

const form=document.querySelector（“.form”）
常量渲染器=（）=>{
const newElement=document.createElement（'div'）
newElement.className='错误'
newElement.innerHTML=`
请提供有效的电子邮件

`
const rootElement=document.getElementById（'error\uu container'））
追加（新元素）
}
常量validateForm=（）=>{
常量isValid=/^[^\s@]+@[^\s@]+\.[^\s@]+$/
if（isValid.test（email.value））{
//归还某物
}否则{
渲染器（）
}
}
表格.addEventListener（'submit'，（e）=>{
e、 预防默认值（）
validateForm（）
})

---

一种解决方案：您可以在重新渲染之前清除

根元素的内容：

const renderError=（）=>{
const newElement=document.createElement（'div'）
newElement.className='错误'
newElement.innerHTML=`
请提供有效的电子邮件

`
const rootElement=document.getElementById（'error\uu container'））
rootElement.innerHTML=“”；//不要每次都创建新的错误元素。请尝试查找以前创建的错误元素（例如，通过id）。仅在需要时创建它。这通常称为“惰性”初始化


//延迟返回error元素（如果找不到，则创建它）
常量错误元素=（）=>{
let element=document.getElementById（'errorElement'）
if（！元素）{
element=document.createElement（'div'）
element.className='错误'
element.id='errorElement'；
const rootElement=document.getElementById（'error\uu container'））
追加（元素）
}
返回元素
}
让计数=0
常量validateForm=（）=>{
常量isValid=/^[^\s@]+@[^\s@]+\.[^\s@]+$/
if（isValid.test（email.value））{
//归还某物
}否则{
常量元素=errorElement（）；
element.innerHTML=`something出错${++count}次`
}
}
const form=document.getElementById（'myform'）
表格.addEventListener（'submit'，（e）=>{
e、 预防默认值（）
validateForm（）
})

按钮
请添加所有相关代码（HTML）因此，我们可以复制您的问题。添加。我知道有更简单的方法来实现这一点，但我很好奇在这种情况下我做错了什么。您的代码甚至在正确解析时也存在一些问题。请编辑问题并更正问题。我明白了。很明显，我在每次按下按钮时都会创建新元素，但我对如何创建新元素感到困惑为了防止这种情况发生。谢谢。在您看来，在处理表单时，显示错误消息的最佳方式是什么。我们应该在HTML文件中包含必要的HTML并切换其可见性，还是应该使用innerHTML或insertAdjacentHtml动态地向HTML注入JavaScript？我个人的首选方式是不在一个时间内直接操作DOMLH.使用一个抽象工作的框架，比如angular、react或vue。如果你只是在制作一个小应用程序，没有时间使用monster框架，那么我会放一个空div（样式的最小高度比文本高），只需更改其内部文本。感谢KostasX的回答。似乎您提到的第一种方法存在一些问题。显然，即使值有效，错误消息仍然可见。您应该在if语句中添加相关代码。此代码将负责禁用/隐藏消息。