Question

我正在学习JS，并在此计数器上工作，该计数器在单击时会增加/减少值，例如当前值是6，如果我递减它，它会变成7,6,5，依此类推

HTML：

<div id="add">Add</div>
<span id="text">0</span>    
<div id="red">Reduce</div>

JS：

var add  = document.getElementById("add");

var text  = document.getElementById("text");
var count = 1;

add.addEventListener("click", function() {
    text.innerText = count++;
});

red.addEventListener("click", function() {
    text.innerText = count--;
});

我在这里想念什么？

Answer 1

只需以正确的方式使用JS increament decrement运算符

var add = document.getElementById("add");

var text = document.getElementById("text");
var count = 0;

add.addEventListener("click", function() {

  text.innerText = ++count;
});

red.addEventListener("click", function() {

  text.innerText = --count;

});

<div id="add">Add</div>
<span id="text">0</span>
<div id="red">Reduce</div>

Answer 2

尝试一下- 将count分配为0，并使用预增和预减运算符。然后分配

var add  = document.getElementById("add");

var text  = document.getElementById("text");
var count = 0;

add.addEventListener("click", function() {

text.innerText = ++count;
});

red.addEventListener("click", function() {

text.innerText = --count;

});

Answer 3

先递增/递减值，然后赋值

var add = document.getElementById("add");
var text = document.getElementById("text");
var count = 0;

add.addEventListener("click", function() {
  count += 1
  text.innerText = count;
});
red.addEventListener("click", function() {
  count -= 1
  text.innerText = count;

});

<div id="add">Add</div>
<span id="text">0</span>
<div id="red">Reduce</div>

Answer 4

您可以将计数器设置为0。然后使用后递增/后递减 使用前递增/前递减。

如果在操作数前使用带前缀的运算符（例如++ x），则它在递增后返回值。

如果使用前缀（例如--x），则它在减量后返回该值。

var add  = document.getElementById("add");

var text  = document.getElementById("text");
var count = 0;

add.addEventListener("click", function() {
  text.innerText = ++count;
});

red.addEventListener("click", function() {
  text.innerText = --count;
});

#add{
  color: green; 
  width: 60px; 
  border: 1px solid green; 
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
#red{
  color: red; 
  width: 60px; 
  border: 1px solid red;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}

<div id="add">Add</div>
<span id="text">0</span>    
<div id="red">Reduce</div>

Answer 5

您的第一个问题是count变量从1开始，而<span>文本从0开始。您希望这些值相同。

其次，您应该在分配text.innerText值（即预递增）之前切换递增/递减以执行递增和递减操作。可以按照以下步骤进行操作：

add.addEventListener("click", function() {
    text.innerText = ++count; // See how the ++ comes beforehand
});

red.addEventListener("click", function() {
    text.innerText = --count; // See how the -- comes beforehand
});

Answer 6

它是指操作员优先级。您的以下代码：

text.innerText = count++;

手段：
1：text.innerText = count;
2：计数=计数+1；

但是下面一行：

 text.innerText = ++count;

手段：
1：计数=计数+1;
2：text.innerText = count;

查看更多结果：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

JS计数器的增量/减量错误

6 个答案: