javascript - 用于数字加法和减法的简单按钮

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)