JavaScript 每次按下按钮时递增和递减

Question

我试图在每次按下按钮时增加 upBtn 和减少 downBtn 10,000。 downBtn 是递减的，而 upBtn 是连接的。有人可以解释为什么一个工作正常，为什么另一个不工作以及我如何解决它？我是编码新手，可以使用帮助来理解这一点。

    upBtn.addEventListener('click', function (event) {
        rocketImg.style.top -= 10;
        document.getElementById('spaceShuttleHeight').textContent += 10000;
    });
    downBtn.addEventListener('click', function (event) {
        rocketImg.style.top += 10;
        document.getElementById('spaceShuttleHeight').textContent -= 10000;
    });```

Answer 1

style.top 想要 px 数量。您需要先获取当前金额，然后从中获取 add/subtract 10，然后将其设置回新值。

Answer 2

您的 rocketImg.style.top 是字符串类型而不是数字。尝试将其包装在 parseInt()（或 parseFloat()，具体取决于类型），如下所示：parseInt(rocketImg.style.top) += 10)。 Javascript 自动执行 - 运算符的转换，因为您不能减去字符串。

Answer 3

您需要使用 parseInt 或类似的方式让 JavaScript 知道这应该被视为数字而不是字符串：

const adjustValue = event => {
  const increasePressed = event.target.id === 'increase';
  const decreasedPressed = event.target.id === 'decrease';

  if (increasePressed || decreasedPressed) {
    const currentValue = parseInt(document.querySelector('#el').innerHTML);
    const el = document.querySelector('#el');

    el.innerHTML = increasePressed ? currentValue + 10000 : currentValue - 10000;
  }
};

document.querySelector('#container').addEventListener('click', adjustValue);

<div id="container">
  <span>Current value:&nbsp;</span><span id="el">0</span><br/>
  <input id="increase" type="button" value="Increase" />
  <input id="decrease" type="button" value="Decrease" />
</div>

JavaScript 每次按下按钮时递增和递减

JavaScript increment and decrement each time a button is pressed

javascript

dom

increment