每次点击按钮,我都会移动div。它应始终移动相同的距离。我是用JavaScript做的,但是在第一次点击后我似乎无法使它工作。
HTML
<div id="container">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<button id="move">Click to move the square</button>
CSS
.slide {
display: inline-block;
width: 100px;
height: 100px;
background: lightblue;
margin-bottom: 10px;
margin-right: 10px;
}
JS
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)"
}
我还尝试使用“onclick”属性通过HTML处理点击事件:
HTML
<button id="move" onclick="clickNext()">Click to move the square</button>
JS
function clickNext() {
document.getElementById("container").style.transform = "translateX(-100px)"
}
在这些代码位中的每一个中,按钮按预期工作,但只能工作一次。之后,按钮停止工作。
对于为什么会发生这种情况的任何帮助都会非常感激。
答案 0 :(得分:1)
由于第二次点击时分配的style
属性没有变化,因此没有animation
试试这个:
var amount = 30;
var initial = 0;
document.getElementById("move").addEventListener("click", function() {
initial += amount;
document.getElementById("container").style.transform = "translateX(" + initial + "px)"
})
.slide {
display: inline-block;
width: 100px;
height: 100px;
background: lightblue;
margin-bottom: 10px;
margin-right: 10px;
}
<div id="container">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<button id="move">Click to move the square</button>