如何实现计算器错误提示Div仅单次显示（避免重复创建）

这问题太常见啦！你当前的代码每次调用displayErr()都会新建一个错误提示Div并添加到表单里，所以重复点击「计算」按钮就会不断生成新的提示框。咱们可以用两种简单的方法解决，看你更习惯哪种：

方法一：创建前检查是否已存在错误提示 #

修改你的displayErr()函数，每次创建前先查找页面上是否已经有class为errorBox的元素，如果存在就直接跳过创建逻辑：

function displayErr() {
  // 先检查页面上是否已经有错误提示框
  const existingErrorBox = document.querySelector(".errorBox");
  if (existingErrorBox) {
    return; // 已有提示框，直接退出函数
  }
  
  const formBox = document.querySelector("form");
  const errorBox = document.createElement("div");
  errorBox.className = "errorBox";
  const errorText = document.createTextNode("Those are not numbers!");
  errorBox.appendChild(errorText);
  formBox.appendChild(errorBox);
}

这种方法不需要修改HTML结构，只需要在原函数里加个检查逻辑就行，非常直观。

方法二：提前创建错误提示框，控制显示/隐藏 #

更推荐这种方式，把错误提示框提前写在HTML里，默认隐藏，需要时再显示，避免重复DOM操作：

首先在你的<form>标签里添加错误提示框：

<form>
  <!-- 这里放你的输入框、计算按钮等表单元素 -->
  <div class="errorBox" style="display: none;">Those are not numbers!</div>
</form>

然后修改displayErr()函数，只负责显示已有的提示框：

function displayErr() {
  const errorBox = document.querySelector(".errorBox");
  errorBox.style.display = "block"; // 显示错误提示
}

额外优化：输入合法时隐藏提示 #

如果用户后续输入了正确的内容，别忘了隐藏错误提示，比如在计算成功的逻辑里加上：

// 当输入合法时，隐藏错误提示
const errorBox = document.querySelector(".errorBox");
if (errorBox) {
  errorBox.style.display = "none";
}

这种方法的优势是减少DOM创建/删除的开销，而且能更灵活地控制提示框的显示状态，用户体验也更好。

内容的提问来源于stack exchange，提问作者user11062120