如何在每次单击Javascript时随位置移动元素

Question

所以我有一个按钮

<button class="item">Button</button>

我希望它每次点击都向左移动100像素所以我做了这个

item = document.querySelector(".item")
let moveItem =()=>{
item.style.position = 'absolute'
item.style.left += '100px'
}
item.addEventListener("click", moveItem)

但它只移动一次。每次点击它时，我该如何移动它？

Answer 1

首先，您的moveItem函数中的括号是错误的，因此将其更改为大括号，然后style.left返回null或字符串，因此您需要将其解析为int:

const item = document.querySelector(".item")
let moveItem = () => {                       // change bracket type
item.style.position = 'absolute';

const left =  item.style.left || 0;       // get left if it exists or default to zero

item.style.left = `${parseInt(left, 10) + 100}px`;   // change the left value to an int and add 100 
}
item.addEventListener("click", moveItem)

<button class="item">Button</button>

Answer 2

生成左位置值时的逻辑错误

像item.style.left += '100px'一样添加左边的位置将保持多次生成由100px组成的字符串。第一次运行时，它将给您一个为左位置设置的结果100px，下一次此操作将给您结果100px100px，这是左位置的无效值。因此，它不会用新值更新position-left属性，而是保留旧值。

我的解决方案：每次单击按钮时，都会获得左侧位置的当前数值和该值的100。

item = document.querySelector(".item")
let moveItem =()=>{
item.style.position = 'absolute'
const currentpos = item.style.left.match(/d+/g);
item.style.left = currentpos ? +currentpos[0] + 100 + 'px' : '100px'
}
item.addEventListener("click", moveItem)

<button class="item">Button</button>