Javascript仅显示一次div

因此，我有一个计算器，如果输入为NaN，按下“计算”按钮，就会显示一条错误消息。每次用户按calculate时都会创建错误消息。如何使其仅在多次按“计算”后显示

---

尝试使用计数器。类似于如果int i==0-->执行该函数。我会的

    int i = 0;

    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)) && i == 0 || (isNaN(peopleAmount)) && i == 0 || 
      (billInput === "") && i == 0 || (peopleAmount === "") && i == 0) 
{
    displayErr();
    i += 1;
}

现在它只会显示一次错误，因为我再也不会是0了

最简单的方法是

---

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

始终渲染元素，但使用

display:none将其隐藏

在

displayErr（）

---

更好的方法是 使用CSS类显示和隐藏元素 创建元素并使用隐藏它

display: none;

并通过向元素添加类来显示它

display: block;

const-element=document.getElementById（“myDIV”）；
const button=document.getElementById（“btn”）；
button.addEventListener（“单击”，（）=>element.classList.toggle（“显示”）；

#myDIV{
显示：无；
}
.表演{
显示：块！重要；
}

试试看
这是一个DIV元素。

下面是一个显示/隐藏解释的纯JavaScript示例：

function CheckInput() {
    const billInput = document.getElementById("b").value;
    const peopleAmount = document.getElementById("p").value;

    if ((isNaN(billInput)) || (isNaN(peopleAmount)) || (billInput === "") || (peopleAmount === "")) {
    showErr();
  }
  else{
    hideErr();
  }
}

function hideErr(){
    console.log("hide");
    const el = document.getElementById("error");
    el.style.display = "none";
}
function showErr(){
    console.log("show");
    const el = document.getElementById("error");
    el.style.display = "block";
    el.innerHTML = "Hey sorry wrong input";
}

window.onload = function() {
    hideErr();
}

---

您可以查看HTML并在此处尝试代码：

您可以向

displayErr

函数传递一个参数，然后使用它设置单个目标div的

隐藏的
HTML属性和
文本内容
，由其HTML
id
标识

通过这种方式，功能变得可重用，您可以随时设置/取消设置错误消息


const input=document.querySelector（“#input”）
const errDisplay=document.querySelector（“#err display”）
函数displayErr（msg）{
errDisplay.textContent=msg | |“”
errDisplay.hidden=msg？空：“hidden”
}
addEventListener（'input'，（）=>{
displayErr（isNaN（input.value）-“非数字”：null）
})
#错误显示{
字体系列：无衬线；
背景：红色；
颜色：白色；
边缘：.5em0；
填充：.5em；
}

只要有一个div，当他们单击按钮时显示它。如果输入为NaN，则在输入为NaN时隐藏它。你不必每次都创建一个新的div。我想是的，这更容易，哈哈。有没有什么方法可以用循环或其他什么来修复这个tho？我对JS相当陌生。如果您想创建div而不是出于某种原因隐藏/显示它，您可以使用一个布尔变量，该变量在创建div时更新为1，在再次删除div时更新为0。只需在函数的开头添加一个布尔值0的检查（if！boolean continue function..）等等。哦，如果您是JS新手，我的描述可能比帮助更令人困惑。让我知道如果你需要一个例子，你肯定不需要一个循环。您应该完成以下步骤：>输入是否有效，如果有效：检查错误div是否存在并删除它。如果输入无效：>检查错误div是否已经存在。如果它已经存在：删除它并添加一个新div。如果它不存在，只需添加一个新div。但是，如果您不介意隐藏/显示，我强烈建议您只需在html中放置一个错误div，并在必要时隐藏/显示它。它更简单，并且有大量的现有示例。如果希望在IE11上运行，请小心使用箭头函数。否则，这是一个很好的方法。
display: block;

function CheckInput() {
    const billInput = document.getElementById("b").value;
    const peopleAmount = document.getElementById("p").value;

    if ((isNaN(billInput)) || (isNaN(peopleAmount)) || (billInput === "") || (peopleAmount === "")) {
    showErr();
  }
  else{
    hideErr();
  }
}

function hideErr(){
    console.log("hide");
    const el = document.getElementById("error");
    el.style.display = "none";
}
function showErr(){
    console.log("show");
    const el = document.getElementById("error");
    el.style.display = "block";
    el.innerHTML = "Hey sorry wrong input";
}

window.onload = function() {
    hideErr();
}