Question

我无法理解为什么无论您单击多少次以下内容都只能运行一次。

它一次更新一次最高位置，但是在下次单击时它什么也不做。为什么它不读取前一个顶部的输入并在每次单击时再添加10个像素？

const text = document.querySelector('.test');

window.onclick = () => {
  text.style.top = (text.style.top += 10) + 'px';
}

.test {
  position: relative;
}

<p class="test">Hello World!</p>

Answer 1

您可以使用parseInt提取text.style.top的数字部分。

const text = document.querySelector('.test');

window.onclick = () => {
  // extract the numeric part from text.style.top
  var t = parseInt(text.style.top, 10);
  // if there was no numeric part assume zero
  if (isNaN(t)) t = 0;
  
  // do the math inside parens, and then append "px" to it
  text.style.top = (t + 10) + "px";
}

.test {
  position: relative;
}

<p class="test">Hello World!</p>

Answer 2

使用字符串进行数学运算将不起作用（"10px" + "10px"不是"20px" ...）。而是保留一个数字，然后将其转换为字符串：

let top = 10;

window.onclick = () => {
  text.style.top = (top += 10) + 'px';
};

为什么最高排名仅更改一次

2 个答案: