Javascript 使用；转换：翻译；使用JS只能工作一次

每次我点击一个按钮，我都要移动一个div。它应该始终移动相同的距离。我是用JavaScript实现的，但在第一次单击之后，我似乎无法让它工作

HTML

JS

我尝试过从事件侦听器外部调用函数，如下所示：

document.getElementById("move").addEventListener("click", clickNext);
function clickNext() {
  document.getElementById("container").style.transform = "translateX(30px)"
}

我还尝试通过带有“onclick”属性的HTML处理单击事件：

HTML

在这些代码位中的每一位中，按钮都像预期的B一样工作，但只工作一次。之后，按钮停止工作

---

非常感谢您提供有关发生这种情况的原因的任何帮助。

因为在第二次单击时分配的

样式

属性没有变化，因此没有

动画

试试这个：

var金额=30；
var初始值=0；
document.getElementById（“移动”）.addEventListener（“单击”，函数）（）{
初始+=金额；
document.getElementById（“容器”）.style.transform=“translateX”（+initial+“px）”
})

。幻灯片{
显示：内联块；
宽度：100px；
高度：100px；
背景：浅蓝色；
边缘底部：10px；
右边距：10px；
}

单击以移动正方形

.slide {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightblue;
  margin-bottom: 10px;
  margin-right: 10px;
}

document.getElementById("move").addEventListener("click", function() {
  document.getElementById("container").style.transform = "translateX(30px)"
})

document.getElementById("move").addEventListener("click", clickNext);
function clickNext() {
  document.getElementById("container").style.transform = "translateX(30px)"
}

<button id="move" onclick="clickNext()">Click to move the square</button>

function clickNext() {
  document.getElementById("container").style.transform = "translateX(-100px)"
}