为什么我的柜台项目在减少之前增加价值，反之亦然？

问题描述 投票：0回答：2

我做了一个项目，它是一个简单的计数器，带有三个按钮“减少”、“重置”和“增加”

每个都附加了 onclick 事件。

这是我的 html 文件的代码和我的 js 文件中的每个函数。

<body>
  <wrapper>
    <h1>Counter</h1>
    <h2 id="counter">0</h2>
     <div class="buttonContainer">
        <button onclick="decrease()">Decrease</button>
        <button onclick="reset()">Reset</button>
        <button onclick="increase()">Increase</button>
     </div>
 </wrapper>
</body>

Let i = 0;

function increase() {
  document.getElementById(‘counter’).innerHTML = i;
i++;
}

function decrease() {
  document.getElementById(‘counter’).innerHTML = i;
i—-;
}

function reset() {

i = 0;
document.getElementById(‘counter’).innerHTML = i
}

我一直在试图弄清楚为什么当我按照 increase() 和 decrease() 函数的顺序编写代码时，例如……如果计数器为 1 并且我单击 increase，我必须单击它在它增加之前两次但是当我点击减少时，它会增加 1 然后减少，反之亦然？

但是当我有 i++ 或 i-- 在获得 id 之前它似乎工作正常？例如

Let i = 0;

function increase() {
i++;
  document.getElementById(‘counter’).innerHTML = i;

}

function decrease() {
i--;
  document.getElementById(‘counter’).innerHTML = i;
}

如果有人可以提供帮助，我不确定为什么要这样做？

我已经通过让项目按照我想要的方式工作来解决这个问题，但我无法弄清楚为什么当我的函数不以任何方式相互引用时，增加会在增加之前减少计数器，反之亦然？

javascript html function counter
2个回答
0
投票

代码是从上到下执行的，不是相反

let i = 0;

function increase() {
  i++;
  document.getElementById('counter').innerHTML = i;
}

function decrease() {
  i--;
  document.getElementById('counter').innerHTML = i;
}

function reset() {
  i = 0;
  document.getElementById('counter').innerHTML = i
}
<button onclick="decrease()">Decrease</button>
<button onclick="reset()">Reset</button>
<button onclick="increase()">Increase</button>
<p id="counter">0</p>

0
投票

数字是“Value Types”，这意味着如果您将它们分配给一个新变量或将它们传递给一个函数，该值将被复制。相反，在“Reference Types”上，行为只是指针将被复制而不是值。

值类型示例：

let i = 4;
let j = i;
i++; // it only changes i

参考类型示例：

let i = {value:4};
let j = i;
i.value++; // it also changes j
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.