时间戳

首页 > 解决方案 > Javascript 只显示一次 div

javascript - Javascript 只显示一次 div

问题描述

所以我有一个带有错误消息的计算器，如果输入是 NaN，他们按下“计算”按钮。每次用户按下计算时，都会不断创建错误消息。我如何使它即使在多次按下“计算”后也只会显示？

在此处输入图像描述

    function displayErr() {
    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);
}

if ((isNaN(billInput)) || (isNaN(peopleAmount)) || (billInput === "") || (peopleAmount === "")) {
    displayErr();
}

标签： javascripthtmlcss

解决方案

最直接的方法是检查元素是否已经存在。

function displayErr() {
    // Get error element
    const errorElement = document.getElementsByClassName('errorBox');

    // If it already exists
    if (errorElement && errorElement.length > 0) {

        // Dont add another one
        return;
    }

    // Add new errorBox
    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);
}

另一种选择是使用 css 类来“隐藏”元素；

  1. 总是渲染元素，但隐藏它display: none
  2. 在 中displayErr()，使用类似的东西使元素可见document.getElementsByClassName('errorBox')[0].style.display = block;

推荐阅读