javascript - 通过 ++ 和 -- 返回 NaN

Question

这里有两个按钮，一个减少另一个，每个按钮都增加。

function inc() {
  var i = document.getElementById("num");
  ++i;
  document.getElementById("num").innerHTML = i;
}

function dec() {
  var i = document.getElementById("num");
  i--;
  if (i <= 0) {
    i = 0;
  } else {
    document.getElementById("num").innerHTML = i;
  }
}

<div id="disp">
  <div id="num">0</div>
</div>

<button onclick="dec()" class="but">-</button>
<button onclick="inc()" class="but">+</button>

但这会返回 NaN；我能做些什么？

Answer 1

您需要获取 html 元素的文本，例如：

function inc() {
  var i = document.getElementById("num").innerHTML;
  ++i;
  document.getElementById("num").innerHTML = i;
}

function dec() {
  var i = document.getElementById("num").innerHTML;
  i--;
  if (i <= 0) {
    i = 0;
  } else {
    document.getElementById("num").innerHTML = i;
  }
}

<div id="disp">
  <div id="num">0</div>
</div>

<button onclick="dec()" class="but">-</button>
<button onclick="inc()" class="but">+</button>

Answer 2

$(function(){

  $('#add').on('click',add);
  $('#sub').on('click',remove);

});


function add(){

  var input = $('#Quantity'),
      value = input.val();
      
  input.val(++value);
  
  if(value > 0){
    $('#sub').removeAttr('disabled');
  }

}


function remove(){

   var input = $('#Quantity'),
       value = input.val();
      
   if(value > 0){
     input.val(--value);
   }else{
     $('#sub').attr('disabled','disabled');
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="disp">
 <input id="Quantity" disable="true">
</div>

<button id="sub" class="but">-</button>
<button id="add" class="but">+</button>

Answer 3

确保你得到了 num 的 html：

document.getElementById("num").innerHTML;

Answer 4

getElementById() 方法返回具有指定值的 ID 属性的元素。

您正在处理该元素中的文本，因此您也可以尝试 textContent

<script>
  function inc()
   {
     var i = document.getElementById("num").textContent;
     console.log(i);
     ++i;
     document.getElementById("num").innerHTML = i;
   }

   function dec() {
     var i = document.getElementById("num").textContent;
     i--;
     if (i <= 0) 
       {
          i = 0;
       } else {
          document.getElementById("num").innerHTML = i;
        }
      }
</script>