Question

我正在尝试创建两个简单的按钮来进行数字的加减。这是代码

function add() {
  document.getElementById("output").innerHTML = Number(document.getElementById("output").innerHTML) + 1;
}


function sub() {
  document.getElementById("output").innerHTML = Number(document.getElementById("output").innerHTML) - 1;

  if (Number(document.getElementById("output").innerHTML) <= 0) {
    document.getElementById("swe").style.visibility = "hidden"
  } else if (Number(document.getElementById("output").innerHTML) >= 1) {
    document.getElementById("swe").style.visibility = "visible"
  }
}

<button value="sub" onclick="sub()" id="swe">-</button>
<span id="output">0</span>
<button value="add" onclick="add()" id="sqr">+</button>

因此，该按钮可以很好地添加数字，但是当innerHTML> = 1时，该按钮不会再次显示？可能是什么原因造成的？

Answer 1

您的检查以查看输出是否小于1仅在sub函数中发生，但是sub函数仅由减法按钮调用，该减法按钮在第一次获得输出时被隐藏小于1-因此，它将永远不会再出现。

改为执行两个功能：

const output = document.getElementById("output");
function check() {
  const outputNum = Number(output.textContent);
  document.getElementById("swe").style.visibility =
    outputNum <= 0 ?
    'hidden' :
    'visible';
}

function add() {
  output.textContent = Number(output.textContent) + 1;
  check();
}

function sub() {
  output.textContent = Number(output.textContent) - 1;
  check();
}

<button value="sub" onclick="sub()" id="swe">-</button>
<span id="output">0</span>
<button value="add" onclick="add()" id="sqr">+</button>

（还请注意，除非您有意插入或检查HTML标记，否则应检查/设置textContent而不是.innerHTML）

简单的按钮，用于加减数字

1 个答案: