Задача такая: при клике на блок он сдвигается на 100px, сколько раз кликнул на блок он на 100px сдвигается вправо, максимальное значение по ограничению должно быть 1000px. Помогите пожалуйста реализовать данную задачку, спасибо!
document.querySelector(".box").addEventListener("click", function() {}).box{
width:50px;
height:50px;
background:red;
}<div class='box'></div>Если я Вас правильно понял...
document.querySelector(".box").addEventListener("click", function(e) {
if(e.target.offsetLeft < 500)
{
const left = e.target.offsetLeft + 100 + "px";
e.target.innerHTML = "Left: " + left;
e.target.style.left = left;
}
});.container {
position: absolute;
}
.box {
position: absolute;
left: 0px;
top: 0px;
width: 50px;
height: 50px;
border: 1px solid red;
cursor: pointer;
font-style: monospace;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: left 1s ease-in-out;
}<div class="container">
<div class="box">Left: 0px</div>
</div>Ограничено 500 пикселями для удобства работы со снипетом кода.
Если необходимо учитывать отступы и т.д., то необходимо их также учитывать при вычислении нового значения отступа/позиции.